JavaScript Waterfall Flow Layout Implementation method detailed _javascript skills

The example of this article describes the implementation of JavaScript waterfall flow layout. Share to everyone for your reference, specific 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"}]};
 /** * Scrolling 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 to be inserted} oparent.innerhtml+=htmlstr; Waterfall ("Waterfall", "Mod-box"); Re-invoke}/** * Waterfall flow function * @param parentid container ID * @param clsname data block classname/function waterfall (parentid,clsname) {var oparent = document.getElementById (ParentID);//Parent object//The element that has all the classes under the content is mod-box var oboxs = Getobjsbycla Ssname (oparent,clsname)//Get array of storage block box Clsname oboxs var oboxwidth = oboxs[0].offsetwidth; Obox width ==>310+9*2+2+15 = 345 (contains border and inner margin) a block box of wide 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 (width/obox wide) that can be accommodated in each row for the entire page display mod-box var haarr = [];
  Used to store the height of the addition of all the block boxes in each column.   
  var MinH;    var Minhindex;
    The minimum height corresponds to the index value for (var i = 0;i<oboxs.length;i++) {//traversal of each block element of the array apin oboxs[i].style.position= "absolute";
      if (i<cols) {//discharge the first row well and record the height of each column 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 Haarr MinH = Minhindex (getminhindex) in array Haarr,minh;
      oboxs[i].style.top=minh+ "px";
      oboxs[i].style.left=oboxwidth*minhindex+ "px";
      oboxs[i].style.left= oboxs[minhindex].offsetleft+ "px"; Array of the smallest high element high + + added on the Apin[i] block box high haarr[minhindex]+=oboxs[i].offsetheight; Update columns After you add a block boxHigh} var maxh = Math.max.apply (Null,haarr); OParent.style.cssText = "width:" +oboxwidth*cols+ "px;margin:0 auto;height:" +maxh+ "PX;"; Set Parent Center 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.getEl
  Ementbyid (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 the trigger Add block function waterfall (): The last block box is the distance from the top of the page + its own high half (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 element * @param ID * @param clsname * @returns {Array} */function Getobjsbyclassname (parentid,clsname) {Based on class var parentobj = typeof parentid== "Object" pArentID:document.getElementById (ParentID);
  if (!parentobj) {return; var childobjs = parentobj.getelementsbytagname ("*"); Gets all subsets of the parent var calssobjs = []; Creates an array for collecting child elements for (var i in Childobjs) {//traversing child elements, judging categories, pressing an array if (childobjs[i].classname==clsname) {Calssobjs.pus
    H (Childobjs[i]);
} return CALSSOBJS;  /** * Gets the index of the minimum value Minindex * @param arr * @param MinH * @returns {string}/function Getminhindex (Arr,minh) {for (Var
    I in arr} {if (Arr[i]===minh) {return i;

 }
  }
}

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript animation effects and tips Summary", "JavaScript Error and debugging skills summary", " A summary of JavaScript extension techniques and the summary of JavaScript motion effects and techniques

I hope this article will help you with JavaScript programming.