Waterfall Flow Layout JS implementation

Waterfall flow is pretty good, so deliberately study the next;

<div id= "main" > <div class= "pin" > <div class= "box" >  </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 class= "pin"        ; <div class= "box" >  </div> </div> <div class=    Pin > <div class= "box" >  </div> </div> &lT;div class= "pin" > <div class= "box" >  </div> &        lt;/div> <div class= "pin" > <div class= "box" >  </div> </div> <div class= "pin" > <div class= "box" >  </div> </div> <div class=" pin "> <div class=" box "> <im             G src= "./images/11.jpg"/> </div> </div> <div class= "pin" > <div class= "box" >  </div> </div> <div class= "pin" > <d IV class= "box" >  </div> </div> <div class= "pin    "> <div class=" box ">  </div> </div> <div class= "Pin" >       <div class= "box" >  </div> </div> <di V class= "pin" > <div class= "box" >  </div> < /div> <div class= "pin" > <div class= "box" >  &L t;/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>

First I add 21 images to the HTML.

*{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;    }

Simple CSS style, add a relative positioning property to a large box, and then use JS to add an absolute positioning attribute to the box to locate it relative to the parent box

Start JS logic below

Window.onload=function () {Waterfall (' main ', ' pin ');        var dataint={' data ': [{' src ': ' 1.jpg '},{' src ': ' 2.jpg '},{' src ': ' 3.jpg '},{' src ': ' 4.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 Element node                   Opin.classname= ' pin ';              Add Class name Name property Oparent.appendchild (Opin);                Add a child node 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);//Gets the array that stores the Block box pin aPin var ipinw=apin[0].offsetwidth;//a block box pin wide var num=math.floor (docum ENT.DOCUMENTELEMENT.CLIENTWIDTH/IPINW)///number of pins in each row "window width divided by a block box width" oparent.style.csstext= ' width: ' +ipinw*num+ ' Px;ma rgin:0 auto; ';    /Set parent centered style: Fixed width + auto horizontal margin var pinharr=[];//is used to store the height of all the block boxes in each column.        for (Var i=0;i<apin.length;i++) {//traversal array aPin each block box element var Pinh=apin[i].offsetheight; if (i<num) {Pinharr[i]=pinh;//the NUM block box pin in the first row is added first into the array Pinharr}else{var minh=math.min.apply (            Null,pinharr);//The minimum value in the array Pinharr minH var minhindex=getminhindex (Pinharr,minh);            apin[i].style.position= ' absolute ';//Set Absolute displacement apin[i].style.top=minh+ ' px ';            apin[i].style.left=apin[minhindex].offsetleft+ ' px '; Array min High element high + add on apin[i] block box High pinharr[minhindex]+=apin[i].offsetheight;//Update added block box after sizing}}}/**** * by The class class of the parent and child elements gets the array of that homogeneous child element */function Getclassobj (parent,classname) {var obj=pArent.getelementsbytagname (' * ');//Get all subsets of the parent Var pins=[];//create an array to collect child elements for (Var i=0;i<obj.length;i++) {//Traverse child elements        , judging category, pressing into array if (Obj[i].classname==classname) {Pins.push (obj[i]);    }    }; return PinS;}            /**** * Gets the index of the pin height minimum value of */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 " Triggers the height of the Add block box function waterfall () ": The Last block box is the distance from the top of the page + itself is half high (implementation does not roll to start loading) var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//Note Resolve compatibility var documenth=document.documentelement.clientheight;//page height return (lastPinH< scrolltop+documenth)? true:false;//returns True after reaching the specified height, triggering the waterfall () function}

Ok! Code at a Glance

Waterfall Flow Layout JS implementation