本文实例讲述了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切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript扩展技巧总结》及《javascript运动效果与技巧汇总》
希望本文所述对大家javascript程序设计有所帮助。