javascript瀑布流布局实现方法详解_javascript技巧-js教程-PHP中文网

本文实例讲述了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程序设计有所帮助。