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

【javascript瀑布流布局实现方法详解】相关文章：

★ JavaScript中toString()方法的使用详解

★ javascript用函数实现对象的方法

★ JavaScript实现鼠标点击后层展开效果的方法

★ javascript中动态函数用法

★ JavaScript中的Math.LOG2E属性使用详解

★ javascript基于DOM实现省市级联下拉框的方法

★ javascript获取select值的方法分析

★ Javascript监视变量变化的方法

★ javascript事件冒泡实例分析

★ javascript常用的方法分享