本文实例讲述了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;

}

}

}

希望本文所述对大家JavaScript程序设计有所帮助。