Parse waterfall stream layout: Implementation of JS + absolute positioning _ javascript skills

This article gives a detailed analysis of the implementation of waterfall streams. For more information about the waterfall stream layout, see the absolute positioning method:

I. Layout

1. The container surrounding the block box:

The Code is as follows:

......

2. A block box:

The Code is as follows:

3. initialize the first line/5 block boxes:

The 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.

The 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

The 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 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.

The 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 var pinH = aPin [I]. offsetHeight; // obtain the visible width of the I block box of the array aPin. offsetHeight
If (I 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.
}
}

The 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.

The 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 Var oPin = document. createElement ('P'); // create a pin for adding an element node
OPin. className = 'pin'; // Add the class name attribute
OParent. appendChild (oPin); // create and add a subnode box
Var oBox = document. createElement ('P ');
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.
};
}

The 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 }

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

The Code is as follows:

Script

Js: waterfall. js 1 window. onload = function (){

The 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 Var oPin = document. createElement ('P'); // Add an element node
OPin. className = 'pin'; // Add the class name attribute
OParent. appendChild (oPin); // Add a subnode
Var oBox = document. createElement ('P ');
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 var pinH = aPin [I]. offsetHeight;
If (I 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 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 }