Analyzing waterfall flow layout: JS absolute positioning implementation_javascript skills

Waterfall layout with absolute positioning:

1. Layout

1. Container surrounding the block box:

Copy the code The code is as follows:

... ...

2. A block box:

Copy code The code is as follows:

                                                                                                                 div>



3. Initialize the first row/5 block boxes:

Copy code 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:

2. Ideas:

1. Set the style of the parent main: horizontally centered. 2. Set the style of each block box pin: absolute positioning.

3. Set the listening function for the window scroll event: read the data and add a block box.

JS implementation:

1-①: Get the parent oParent: 1-②: Create the function getClassObj() - get the array containing the block box through the parent id and block box class name.

Copy code The code is as follows: var oParent=document.getElementById('main'); // Parent object

var aPin=getClassObj(oParent,pin);// Get the array of storage block box pin aPin

var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth ); // Get - the number of block boxes that can be accommodated in each line - num [window width divided by the width of a block box]

oParent.style.cssText='width:' iPinW*num 'px;margin:0 auto;';//Use the cssText attribute to add a centered style to the parent main: fixed-width automatic horizontal margins

Copy code The code is as follows:function getClassObj(parent,className){

var obj=parent.getElementsByTagName('*');//Get all subsets of the parent

var pinS=[];//Create an array to store elements with className
for (var i =0;i                                                                                                                                                                                                                     ]);
      };
                      return pinS;} block box aPin[i], assign the first num block boxes to the array pinHArr, and absolutely position the block boxes that exceed the number num of block boxes that can be accommodated in one line.
　2-③: Use the creation function getminHIndex() to return the minimum value in an array

Copy the code


The code is as follows:

var pinHArr=[];//Used to store the combined height of all block boxes in each column [The length of this array also changes with the number of columns]
for(var i=0;i        var pinH=aPin[i].offsetHeight;//Get the visibility of the i-th block box of the array aPin Width offsetHeight
if(i pinHArr[i]=pinH; //The num block boxes aPin in the first line are first added to the array pinHArr
}else{
var minH=Math.min.apply(null,pinHArr);//Calculate the minimum value minH
in the array pinHArr var minHIndex=getminHIndex(pinHArr,minH);//Get the minimum value minH through the created getminHIndex()- Index minHIndex
in the array pinHArr aPin[i].style.position='absolute';//Set the absolute displacement
aPin[i].style.top=minH 'px';
aPin[ i] .style.left = apin [minhindex] .ofSetLeft 'px'; // The Apin [i] block of the minimum high element in the array of the array
Pinharr [minhindex] = apin [i]. //Update the column height after adding the block box The code is as follows:


function getminHIndex(arr,minH){

for(var i in arr){
if(arr[i]==minH)return i;

} } 3: Set the listening function for the window scroll event: read the data and add a block box.

Copy code


The code is as follows:

var dataInt={'data':[{'src ':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g ( 4).jpg'}]};//A temporary data object
//Define the window scroll event listening function below
window.onscroll=function(){

if(checkscrollside()){ var oParent=document.getElementById('main');// Parent object for(var i=0;i var oPin=document.createElement( 'div'); // Create the addition of the element node Pin Opin.className = 'Pin'; // Add the class name name attribute Oparent.appendchild (opin); var oBox=document.createElement('div'); oBox.className='box';

oPin.appendChild(oBox); Create and add child node img

oImg.src='./images/' dataInt.data[i].src;
oBox.appendChild(oImg);
waterfall('main', 'pin');//Encapsulate ①② into the function waterfall(), and add and position the added node to the document.
       };

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 [triggering the added block box function waterfall()]: the distance of the last block box from the top of the web page itself Half of the height (enables loading before scrolling to the bottom)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Pay attention to solving compatibility
var documentH=document.documentElement.clientHeight;/ /Window height
return (lastPinH }

3. Final effect:

4. Summary: This is to let you sort out your thoughts. The expression is not very careful and coherent, and is for reference only.

5. Completed html file and js file:

html: index.html

Copy code The code is as follows:

 
 
 
 
 

 
 
 
 
 

    

        

            
        

    

    

        

            
        

    

    

        

            
        

    

    

        

            
        

    

    

        

            
        

    

 

 
 

js：waterfall.js 1 window.onload=function(){

复制代码 代码如下:

waterfall('main','pin');
var dataInt={'data':[{'src':'g (1).jpg'},{'src':' g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};

window.onscroll = Function () {
if (CheckscrollSide ()) {
var oparent = document.GetelementByid ('Main'); // The parent -level object
for (var I = 0; data; datait.data .length;i ){
var oPin=document.createElement('div'); //Add element node
.appendChild (oPin);                                                                          🎜> 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);// Get the array that stores the block box pin aPin
var iPinW=aPin[0].offsetWidth;//The width of a block frame pin
var num=Math.floor(document.documentElement.clientWidth/iPinW);//The pins that can be accommodated in each row Number [window width divided by the width of a block box]
oParent.style.cssText='width:' iPinW*num 'px;ma rgin:0 auto;';//Set the parent centering style: fixed-width automatic Horizontal margin

var pinHArr=[];//Used to store the combined height of all block boxes in each column.
for(var i=0;i var pinH=aPin[i].offsetHeight;
if(i                                                                                                                                                                           through num through to use use using use using using using so so so so so so so so so so so so so so so so so so to so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so long so so so so so so long so so so so so so so so so so so so so so so so so so so so so so so so pinHArr);//The minimum value minH
in the array pinHArr var minHIndex=getminHIndex(pinHArr,minH);
aPin[i].style.position='absolute';//Set the absolute displacement
[i].style.top=minH 'px';
                                          aPin[i].style.left=aPin[minHIndex].offsetLeft 'px'; [i] Block box height
            pinHArr[minHIndex] = aPin[i].offsetHeight;//Update the column height after adding the block box                                                                                                                                                  . **
*Get the array of child elements of the same type through the class of the parent and child elements
*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//Get all subsets of the parent
var pinS=[];/ /Create an array to collect sub-elements
                                                                                                                                                                     ​className==className){
                                                                                                                                                         🎝>*/
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 [triggering the adding block box function waterfall()]: the last block The distance between the box and the top of the webpage is half of its height (to start loading before scrolling to the bottom)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Pay attention to solving compatibility
var documentH=document .documentElement.clientHeight;//Page height
return (lastPinH }