<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>

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

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"    }   ]  };/** * 滾動添加數(shù)據(jù)函數(shù) */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+=""; //需要插入的結(jié)構(gòu)   }   oparent.innerHTML+=htmlStr;   waterFall("waterfall","mod-box"); //重新調(diào)用一次 }}/** * 瀑布流函數(shù) * @param parentID 容器id * @param clsName 數(shù)據(jù)塊className */function waterFall(parentID,clsName){  var oParent = document.getElementById(parentID); // 父級對象  //將content下所有class為mod-box的元素取出來  var oBoxs = getObjsByClassName(oParent,clsName);// 獲取存儲塊框clsName的數(shù)組oBoxs  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的寬 ==>310+9*2+2+15 = 345(包含邊框和內(nèi)邊距) 一個塊框的寬  var pageWidth = document.documentElement.clientWidth; //頁面可視寬度  //var pageWidth = document.documentElement.offsetWidth; //頁面可視寬度  var cols = Math.floor(pageWidth/oBoxWidth); //計算整個頁面顯示的列數(shù)（頁面寬/obox的寬）每行中能容納的mod-box個數(shù)  var hAarr = []; //用于存儲 每列中的所有塊框相加的高度。  var minH;     var minHIndex;    //最小高度對應(yīng)的索引值  for(var i = 0;i<oBoxs.length;i++){//遍歷數(shù)組aPin的每個塊框元素    oBoxs[i].style.position="absolute";    if(i<cols){ //把第一行排放好，并將每一列的高度記入數(shù)據(jù)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); //數(shù)組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";      //數(shù)組 最小高元素的高 + 添加上的aPin[i]塊框高      hAarr[minHIndex]+=oBoxs[i].offsetHeight; //更新添加了塊框后的列高    }  }  var maxH = Math.max.apply(null,hAarr);  oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //設(shè)置父級居中樣式：定寬+自動水平外邊距}/** * 檢查是否符合加載數(shù)據(jù)（滾動到最后一個oBox） * @param parentID 容器id * @param clsName 數(shù)據(jù)塊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);  //創(chuàng)建【觸發(fā)添加塊框函數(shù)waterfall()】的高度：最后一個塊框的距離網(wǎng)頁頂部+自身高的一半(實現(xiàn)未滾到底就開始加載)  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;  //標(biāo)準(zhǔn)模式與混雜模式  var height = document.documentElement.clientHeight; //頁面高度  return (lastBoxH<scrolltop+height)?true:false;}/** * 根據(jù)class獲得元素 * @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("*"); //獲取 父級的所有子集  var calssObjs = []; //創(chuàng)建一個數(shù)組 用于收集子元素  for(var i in childObjs){//遍歷子元素、判斷類別、壓入數(shù)組    if(childObjs[i].className==clsName){       calssObjs.push(childObjs[i]);    }  }  return calssObjs;}/** * 獲取最小值的索引minIndex * @param arr * @param minH * @returns {string} */function getMinhIndex(arr,minH){  for(var i in arr){    if(arr[i]===minH){      return i;    }  }}