Analysis of waterfall stream layout: Implementation of JS + absolute positioning

Waterfall stream layout in absolute positioning mode:

I. Layout

1. The container surrounding the block box:
Copy codeThe Code is as follows:
<Div id = "main">
......
<Div>

2. A block box:
Copy codeThe Code is as follows:
<Div class = "pin">
<Div class = "box">

</Div>
</Div>

3. initialize the first line/5 block boxes:
Copy codeThe Code is as follows:
. Pin {
Padding: 15px 0 0 15px;
Float: left ;}
. Box {
Padding: 10px;
Border: 1px solid # ccc ;}
. Box img {
Width: 192px;
Height: auto ;}

Effect:

Ii. Ideas:

1. Set the style of the parent main: horizontal center.
2. Set the pin style of each block frame: absolute positioning.
3. Set the Window Rolling event listening function: Read data to add a block box.

JS implementation:

1-①: Get the parent oParent:
1-②: Create the function getClassObj ()-use the parent id and block box class name-to obtain the array containing the block box.
Copy codeThe Code is as follows:
Var oParent = document. getElementById ('main'); // parent object
Var aPin = getClassObj (oParent, pin); // obtain the array aPin of the pin of the bucket.
Var numrentmath.floor(document.doc umentElement. clientWidth/aPin [0]. offsetWidth); // get-Number of block boxes in each row-num [window width divided by the width of one block box]

OParent.style.css Text = 'width: '+ iPinW * num + 'px; margin: 0 auto;'; // use the cssText attribute to add a center style for the parent main: fixed width + automatic horizontal margin

Copy codeThe Code is as follows:
Function getClassObj (parent, className ){
Var obj = parent. getElementsByTagName ('*'); // obtain all subsets of the parent
Var pinS = []; // create an array for storing elements whose class is className
For (var I = 0; I <obj. length; I ++) {// traverses the subset, judges the class name, and pushes in the array
If (obj [I]. className = className)
PinS. push (obj [I]);
};
Return pinS ;}

2-①: Create an array pinHArr-used to store the height of each column;
2-②: The for statement traverses each block box aPin [I] and assigns the previous num block boxes to the array pinHArr, locate the block boxes that exceed the number of block boxes that a row can accommodate.
2-③: Use the create function getminHIndex () to return the minimum value in an array.
Copy codeThe Code is as follows:
Var pinHArr = []; // used to store the height of all block boxes in each column. [the length of this array varies with the number of columns]
For (var I = 0; I <aPin. length; I ++) {// traverses each block frame element of the array aPin.
Var pinH = aPin [I]. offsetHeight; // obtain the visible width of the I block box of the array aPin. offsetHeight
If (I <num ){//
PinHArr [I] = pinH; // The num block box in the first line. aPin is first added to the array pinHArr.
} Else {
Var minH = Math. min. apply (null, pinHArr); // calculates the minimum minH value in the array pinHArr.
Var minHIndex = getminHIndex (pinHArr, minH); // use the created getminHIndex () to obtain the minHIndex of the minimum value of minH in the array pinHArr.
APin [I]. style. position = 'absolute '; // sets the absolute displacement.
APin [I]. style. top = minH + 'px ';
APin [I]. style. left = aPin [minHIndex]. offsetLeft + 'px '; // The height of the smallest element of the array + the height of the block box added to the aPin [I]
PinHArr [minHIndex] + = aPin [I]. offsetHeight; // update the column height after the block box is added.
}
}

Copy codeThe Code is as follows:
Function getminHIndex (arr, minH ){
For (var I in arr ){
If (arr [I] = minH) return I;
}
}

3: Set the Window Rolling event listening function: Read data to add a block box.
Copy codeThe Code is as follows:
Var dataInt = {'data': [{'src': 'G (1).jpg '}, {'src': 'G (92.16.jpg'}, {'src ': 'g (22.16.jpg '}, {'src': 'G (42.16.jpg'}]}; // a temporary data object
// The following defines the Window Rolling event listening Function
Window. onscroll = function (){
If (checkscrollside ()){
Var oParent = document. getElementById ('main'); // parent object
For (var I = 0; I <dataInt. data. length; I ++ ){
Var oPin = document. createElement ('div '); // create the add element node pin
OPin. className = 'pin'; // Add the class name attribute
OParent. appendChild (oPin); // create and add a subnode box
Var oBox = document. createElement ('div ');
OBox. className = 'box ';
OPin. appendChild (oBox );
Var oImg = document. createElement ('img '); // create and add sub-node img
OImg. src = './images/' + dataInt. data [I]. src;
OBox. appendChild (oImg );
}
Waterfall ('main', 'pin'); // encapsulate ① (2) into the waterfall () function, and add the added nodes to the ADD and locate nodes in the document.
};
}

Copy codeThe Code is as follows:
Function checkscrollside (){
Var oParent = document. getElementById ('main ');
Var aPin = getClassObj (oParent, 'pin ');
Var lastPinH = aPin [aPin. length-1]. offsetTop + Math. floor (aPin [aPin. length-1]. offsetHeight/2); // create the height of the waterfall () function that triggers the Add block box function: the last block frame is half the distance from the top of the page + its own height (loading starts if it is not rolled to the end)
Var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop; // compatibility
Var incluenth?document.doc umentElement. clientHeight; // window height
Return (lastPinH <scrollTop + incluenth )? True: false; // return true when the specified height is reached, triggering the waterfall () function
}

Iii. Final Results:

Iv. Conclusion: This is to help you sort out your ideas and express your ideas for reference only.

5. html and js files after completion:

Html: index.html
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "anchor" content = "who care? "/>
<Script type = "text/javascript" src = "waterfall. js"/> </script>

<Title> </title>
<Style type = "text/css">
* {Padding: 0; margin: 0 ;}
# Main {
Position: relative;
}
. Pin {
Padding: 15px 0 0 15px;
Float: left;
}
. Box {
Padding: 10px;
Border: 1px solid # ccc;
Box-shadow: 0 0 6px # ccc;
Border-radius: 5px;
}
. Box img {
Width: 162px;
Height: auto;
}
</Style>
</Head>
<Body>
<Div id = "main">
<Div class = "pin">
<Div class = "box">

</Div>
</Div>
<Div class = "pin">
<Div class = "box">

</Div>
</Div>
<Div class = "pin">
<Div class = "box">

</Div>
</Div>
<Div class = "pin">
<Div class = "box">

</Div>
</Div>
<Div class = "pin">
<Div class = "box">

</Div>
</Div>
</Div>
</Body>
</Html>

Js: waterfall. js 1 window. onload = function (){
Copy codeThe Code is as follows:
Waterfall ('main', 'pin ');
Var dataInt = {'data': [{'src': 'G (1).jpg '}, {'src': 'G (92.16.jpg'}, {'src ': 'g (22.16.jpg '}, {'src': 'G (42.16.jpg'}]};

Window. onscroll = function (){
If (checkscrollside ()){
Var oParent = document. getElementById ('main'); // parent object
For (var I = 0; I <dataInt. data. length; I ++ ){
Var oPin = document. createElement ('div '); // Add an element node
OPin. className = 'pin'; // Add the class name attribute
OParent. appendChild (oPin); // Add a subnode
Var oBox = document. createElement ('div ');
OBox. className = 'box ';
OPin. appendChild (oBox );
Var oImg = document. createElement ('img ');
OImg. src = './images/' + dataInt. data [I]. src;
OBox. appendChild (oImg );
}
Waterfall ('main', 'pin ');
};
}

}
/*
Parend parent id
Pin element id
*/
Function waterfall (parent, pin ){
Var oParent = document. getElementById (parent); // parent object
Var aPin = getClassObj (oParent, pin); // obtain the array aPin of the pin of the bucket.
Var iPinW = aPin [0]. offsetWidth; // The width of the pin in a block box
Var numrentmath.floor(document.doc umentElement. clientWidth/iPinW); // The number of pins that can be accommodated in each row [window width divided by the width of a block box]
OParent.style.css Text = 'width: '+ iPinW * num + 'px; ma rgin: 0 auto;'; // set the parent level Center style: fixed width + automatic horizontal margin

Var pinHArr = []; // used to store the height of all block boxes in each column.
For (var I = 0; I <aPin. length; I ++) {// traverses each block frame element of the array aPin.
Var pinH = aPin [I]. offsetHeight;
If (I <num ){
PinHArr [I] = pinH; // The num block box pin in the first line is first added to the array pinHArr
} Else {
Var minH = Math. min. apply (null, pinHArr); // the minimum value of minH in the array pinHArr
Var minHIndex = getminHIndex (pinHArr, minH );
APin [I]. style. position = 'absolute '; // sets the absolute displacement.
APin [I]. style. top = minH + 'px ';
APin [I]. style. left = aPin [minHIndex]. offsetLeft + 'px ';
// The height of the minimum array height element + the height of the added aPin [I] block box
PinHArr [minHIndex] + = aPin [I]. offsetHeight; // update the column height after the block box is added.
}
}
}
/****
* Obtain the array of the similar child element through the class of the Parent and Child Element
*/
Function getClassObj (parent, className ){
Var obj = parent. getElementsByTagName ('*'); // obtain all subsets of the parent
Var pinS = []; // create an array to collect child elements
For (var I = 0; I <obj. length; I ++) {// traverse sub-elements, Judge categories, and press in Arrays
If (obj [I]. className = className ){
PinS. push (obj [I]);
}
};
Return pinS;
}
/****
* Obtain the index with the minimum pin height.
*/
Function getminHIndex (arr, minH ){
For (var I in arr ){
If (arr [I] = minH ){
Return I;
}
}
}

 
Function checkscrollside (){
Var oParent = document. getElementById ('main ');
Var aPin = getClassObj (oParent, 'pin ');
Var lastPinH = aPin [aPin. length-1]. offsetTop + Math. floor (aPin [aPin. length-1]. offsetHeight/2); // create the height of the waterfall () function that triggers the Add block box function: the last block frame is half the distance from the top of the page + its own height (loading starts if it is not rolled to the end)
Var scrollTop=document.doc umentElement. scrollTop | document. body. scrollTop; // compatibility
Var incluenth?document.doc umentElement. clientHeight; // page height
Return (lastPinH <scrollTop + incluenth )? True: false; // return true when the specified height is reached, triggering the waterfall () function
}