本文实例讲述了javascript瀑布流布局实现方法。分享给大家供大家参考，具体如下：

html结构：

...

...

...

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;i310+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