JavaScript Waterfall Flow Layout

HTML structure

<div id= "Waterfall" > <div class= "Mod-box" > <div class= "mod-img" >...</div> </div>    ; <div class= "Mod-box" > <div class= "mod-img" >...</div> </div> <div class= "Mod-box" &G        T <div class= "mod-img" >...</div> </div></div>

CSS style Sheets

*{margin:0;padding:0} #waterfall {position:relative;}.    mod-box{padding:15px 0 0 15px; Float:left;}.    mod-img{padding:9px;    border:1px solid #ccc;    border-radius:5px;    box-shadow:0 0 5px #ccc; Position:relative;}.    Mod-img img{width:310px; Height:auto;}

JavaScript code

Window.onload = function () {     waterfall ("WaterFall", "Mod-box");} Window.onscroll = scroll;window.onresize = function ()  {    if (re) Cleartimeout (re);     var re = settimeout (function)  {     waterfall ("WaterFall", "Mod-box");      }, 200);} var datainit = {"Data": ["src": "0.jpg", "src": "1.jpg"};/** *  scroll add Data function  */function  scroll () { var flag =  checkscroll ("Waterfall", "Mod-box");  if (flag ) {      var oparent = document.getelementbyid ("Waterfall");      var htmlStr =  "";     var len =  Datainit.data.length;     for (var i=0;i<len;i++) {          htmlstr+= "";   //need to pluginto the structure      }      oparent.innerHTML+=htmlStr;       waterfall ("WaterFall", "Mod-box");   //recall  }}/** *  Waterfall stream function  *  @param  parentID   Container id *  @param  clsName   data block classname  */function waterfall (Parentid,clsname) {    var oparent =  document.getElementById (ParentID); //  Parent object     //Remove all elements of class mod-box from the content     var oboxs = getobjsbyclassname (Oparent,clsname);//  Gets an array of storage block box Clsname oboxs    var oboxwidth = oboxs[0].offsetwidth;     //obox wide  ==>310+9*2+2+15 = 345 (contains borders and padding)   width of a block box     var  pagewidth = document.documentelement.clientwidth;  //Page Visual width     / /var pagewidth = document.documentelement.offsetwidth;  //page Visual width     var cols = math.floor ( Pagewidth/oboxwidth)   //calculates the number of columns displayed across the page (width of the page/obox) the number of mod-box that can be accommodated in each row     var  The haarr = [];  //is used to store   the height of all the block boxes in each column.     var minH;          var  minhindex;       //the minimum height corresponding to the index value     for (var i =  0;i<oboxs.length;i++) {//iterates through the array apin each block box element         oboxs[i]. style.position= "Absolute";         if (i<cols) {  //The first line, And the height of each column is recorded in the data Haarr            haarr.push (OBoxs[i]. offsetheight);             oboxs[i].style.top=0+ "px ";             oboxs[i].style.left=oboxwidth*i+ "px";        }else{             minh = math.min.apply (Null,hAarr);  // The minimum value in the array Haarr minh            minhindex =  Getminhindex (Haarr,minh);             oboxs[i]. style.top=minh+ "px";            // oboxs[i]. style.left=oboxwidth*minhindex+ "px";             oboxs[i].style.left= oboxs[minhindex].offsetleft+ "px";             //array   min High  +  add on apin[i] block box high             haarr[minhindex]+=oboxs[i].offsetheight; //Update adds a block box after the sizing          }  &nBsp; }    var maxh = math.max.apply (Null,hAarr);     oParent.style.cssText =  "width:" +oboxwidth*cols+ "Px;margin:0 auto;height:" +maxh+ "PX;";  //Set parent centered style: Fixed width + automatic horizontal margin}/** *  check for load data (scroll to last Obox)  *  @param  parentID    Container id *  @param  clsName   data block classname *  @returns  {boolean} */ Function checkscroll (Parentid,clsname) {    var  parentobj =  typeof parentid== "Object"  ?parentid:document.getelementbyid (ParentID);     var  oboxs = getobjsbyclassname (parentobj,clsname);     var lastboxh =  oboxs[oboxs.length-1].offsettop+math.floor (OBOXS[OBOXS.LENGTH-1].OFFSETHEIGHT/2);     //Create the height of "Trigger Add block Box function waterfall ()": The Last block box is the distance from the top of the page + itself half high (implementation does not roll to start loading)     var scrolltop  = document.body.scrolltop | | document.documentelement.scrolltop;    //Standard mode and promiscuous mode     var height  = document.documentelement.clientheight; //page height     return  (lastboxh <scrolltop+height)? True:false;} /** *  get elements  *  @param  id *  @param  clsName *  @returns based on class  {array} */function getobjsbyclassname (Parentid,clsname) {    var   parentobj = typeof parentid== "Object"  ?parentid:document.getelementbyid (ParentID);     if (!parentobj) {        return;     }    var childobjs = parentobj.getelementsbytagname ("*");  Get   All subsets of parent     var calssobjs = []; //create an array   to collect child elements      for (VAR&NBSP;I&NBSP;IN&NBSP;CHILDOBJS) {//traversing child elements, judging categories, pressing into arrays &NBSP;&NBSP;&NBSP;&NBSp;    if (Childobjs[i].classname==clsname) {              calssobjs.push (Childobjs[i]);        &NBSP;}&NBSP;&NBSP;&NBSP;&NBSP;}&NBSP;&NBSP;&NBSP;&NBSP;RETURN&NBSP;CALSSOBJS;} /** *  get index of minimum value minindex *  @param  arr *  @param  minH *  @returns  {string} */function getminhindex (Arr,minh) {    for (var i in  arr) {        if (Arr[i]===minh) {             return i;        }     }}

JavaScript Waterfall Flow Layout