Detailed implementation of javascript waterfall flow layout

An example of javascript waterfall layout is presented in this paper. To share for your reference, the details are as follows:

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">
    <div class="mod-img">...</div>
  </div>
</div>

css style Sheet:

*{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": "5.jpg"
    },
    {
      "src": "6.jpg"
    }
   ]
  };
/**
 *  Scroll to add data functions 
 */
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+=""; // The structure that needs to be inserted 
   }
   oparent.innerHTML+=htmlStr;
   waterFall("waterfall","mod-box"); // Call again 1 time 
 }
}
/**
 *  Waterfall flow function 
 * @param parentID  The container id
 * @param clsName  A block of data className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); //  The parent object 
  // will content Under all class for mod-box I'm going to take out the elements 
  var oBoxs = getObjsByClassName(oParent,clsName);//  Gets the storage block box clsName An array of oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox The width of  ==>310+9*2+2+15 = 345( Contains borders and padding ) 1 The width of a block frame 
  var pageWidth = document.documentElement.clientWidth; // Page visual width 
  //var pageWidth = document.documentElement.offsetWidth; // Page visual width 
  var cols = Math.floor(pageWidth/oBoxWidth); // Calculate the number of columns (page width) displayed for the entire page /obox The width of each row mod-box The number of 
  var hAarr = []; // Used to store   The height at which all the blocks in each column are added. 
  var minH;   
  var minHIndex;    // The index value corresponding to the minimum height 
  for(var i = 0;i<oBoxs.length;i++){// Through the array aPin Each block box element 
    oBoxs[i].style.position="absolute";
    if(i<cols){ // The first 1 Line up well and will each 1 Column height is entered into 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); // An array of hAarr Minimum value of 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";
      // An array of   The height of the smallest element  +  On the add aPin[i] Block box high 
      hAarr[minHIndex]+=oBoxs[i].offsetHeight; // Update the column height after adding the block box 
    }
  }
  var maxH = Math.max.apply(null,hAarr);
  oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; // Sets the parent center style: constant width + Automatic horizontal margins 
}
/**
 *  Check to see if it matches the load data (scroll to the end 1 a oBox ) 
 * @param parentID  The container id
 * @param clsName  A block of data 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 trigger add block box function waterfall() The height of: Finally 1 A block box is located at the top of the page + Its high 1 And a half ( The implementation starts loading before rolling to the bottom )
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  // Standard versus hybrid 
  var height = document.documentElement.clientHeight; // Height of the page 
  return (lastBoxH<scrolltop+height)?true:false;
}
/**
 *  According to the class Get the element 
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); // To obtain   All subsets of the parent 
  var calssObjs = []; // create 1 An array   Used to collect child elements 
  for(var i in childObjs){// Iterate over child elements, determine categories, and press into arrays 
    if(childObjs[i].className==clsName){ 
      calssObjs.push(childObjs[i]);
    }
  }
  return calssObjs;
}
/**
 *  Gets the minimum index minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
  for(var i in arr){
    if(arr[i]===minH){
      return i;
    }
  }
}

For more information about JavaScript, please refer to: Summary of JavaScript Switching Effects and Techniques, Summary of JavaScript Animation Effects and Techniques, Summary of JavaScript Errors and Debugging Techniques, Summary of JavaScript Extension Techniques, and Summary of JavaScript Movement Effects and Techniques.

I hope this article has been helpful in JavaScript programming.