本文實例講述了javascript瀑布流布局實現方法。分享給大家供大家參考，具體如下：
html結構：
<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樣式表：
*{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代碼：
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" } ] };/** * 滾動添加數據函數 */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+=""; //需要插入的結構 } oparent.innerHTML+=htmlStr; waterFall("waterfall","mod-box"); //重新調用一次 }}/** * 瀑布流函數 * @param parentID 容器id * @param clsName 數據塊className */function waterFall(parentID,clsName){ var oParent = document.getElementById(parentID); // 父級對象 //將content下所有class為mod-box的元素取出來 var oBoxs = getObjsByClassName(oParent,clsName);// 獲取存儲塊框clsName的數組oBoxs var oBoxWidth = oBoxs[0].offsetWidth; //obox的寬 ==>310+9*2+2+15 = 345(包含邊框和內邊距) 一個塊框的寬 var pageWidth = document.documentElement.clientWidth; //頁面可視寬度 //var pageWidth = document.documentElement.offsetWidth; //頁面可視寬度 var cols = Math.floor(pageWidth/oBoxWidth); //計算整個頁面顯示的列數（頁面寬/obox的寬）每行中能容納的mod-box個數 var hAarr = []; //用于存儲 每列中的所有塊框相加的高度。 var minH; var minHIndex; //最小高度對應的索引值 for(var i = 0;i<oBoxs.length;i++){//遍歷數組aPin的每個塊框元素 oBoxs[i].style.position="absolute"; if(i<cols){ //把第一行排放好，并將每一列的高度記入數據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); //數組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"; //數組 最小高元素的高 + 添加上的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;"; //設置父級居中樣式：定寬+自動水平外邊距}/** * 檢查是否符合加載數據（滾動到最后一個oBox） * @param parentID 容器id * @param clsName 數據塊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); //創建【觸發添加塊框函數waterfall()】的高度：最后一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載) var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop; //標準模式與混雜模式 var height = document.documentElement.clientHeight; //頁面高度 return (lastBoxH<scrolltop+height)?true:false;}/** * 根據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 = []; //創建一個數組 用于收集子元素 for(var i in childObjs){//遍歷子元素、判斷類別、壓入數組 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; } }} 
