javascript瀑布流布局实现方法详解_javascript技巧
程序员文章站
2022-05-09 16:02:03
...
本文实例讲述了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程序设计有所帮助。
上一篇: Hadoop2.2.0集群搭建过程
下一篇: C#中的索引器的简单理解和用法
推荐阅读
-
用Json实现PHP与JavaScript间数据交换的方法详解_PHP
-
js实现翻页后保持checkbox选中状态的实现方法_javascript技巧
-
js如何实现设计模式中的模板方法_javascript技巧
-
javascript无刷新评论实现方法_javascript技巧
-
js实现延时加载Flash的方法_javascript技巧
-
Javascript 代码也可以变得优美的实现方法_javascript技巧
-
javascript解析xml实现省市县三级联动的方法_javascript技巧
-
js获取隐藏元素宽高的实现方法_javascript技巧
-
JavaScript实现反转字符串的方法详解
-
原生javascript实现读写CSS样式的方法详解