javascript瀑布流布局实现方法详解

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

<div id="waterfall"><div class="mod-box"><div class="mod-img">...</div></div><div class="mod-box"><div class="mod-img">...</div></div><div class="mod-box"><div class="mod-img">...</div></div></div>

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;i<len;i++）{ htmlStr+=""; //需要插入的结构 } oparent.innerHTML+=htmlStr; waterFall（"waterfall","mod-box"）; //重新调用一次 }}/** * 瀑布流函数 * @param parentID 容器id * @param clsName 数据块className */function waterFall（parentID,clsName）{var oParent = document.getElementById（parentID）; // 父级对象//将content下所有class为mod-box的元素取出来var oBoxs = getObjsByClassName（oParent,clsName）;// 获取存储块框clsName的数组oBoxsvar oBoxWidth = oBoxs[0].offsetWidth;//obox的宽 ==>310+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<oBoxs.length;i++）{//遍历数组aPin的每个块框元素oBoxs[i].style.position="absolute";if（i<cols）{ //把第一行排放好，并将每一列的高度记入数据hAarrhAarr.push（oBoxs[i].offsetHeight）;oBoxs[i].style.top=0+"px";oBoxs[i].style.left=oBoxWidth*i+"px";}else{minH = Math.min.apply（null,hAarr）; //数组hAarr中的最小值minHminHIndex = getMinhIndex（hAarr,minH）;oBoxs[i].style.top=minH+"px";// oBoxs[i].style.left=oBoxWidth*minHIndex+"px";oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft+"px";//数组 最小高元素的高 + 添加上的aPin[i]块框高hAarr[minHIndex]+=oBoxs[i].offsetHeight; //更新添加了块框后的列高}}var maxH = Math.max.apply（null,hAarr）;oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //设置父级居中样式：定宽+自动水平外边距}/** * 检查是否符合加载数据（滚动到最后一个oBox） * @param parentID 容器id * @param clsName 数据块className * @returns {boolean} */function checkScroll（parentID,clsName）{var parentObj = typeof parentID=="object" ?parentID:document.getElementById（parentID）;var oBoxs = getObjsByClassName（parentObj,clsName）;var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor（oBoxs[oBoxs.length-1].offsetHeight/2）;//创建【触发添加块框函数waterfall（）】的高度：最后一个块框的距离网页顶部+自身高的一半（实现未滚到底就开始加载）var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;//标准模式与混杂模式var height = document.documentElement.clientHeight; //页面高度return （lastBoxH<scrolltop+height）?true:false;}/** * 根据class获得元素 * @param id * @param clsName * @returns {Array} */function getObjsByClassName（parentID,clsName）{var parentObj = typeof parentID=="object" ?parentID:document.getElementById（parentID）;if（！parentObj）{return;}var childObjs = parentObj.getElementsByTagName（"*"）; //获取 父级的所有子集var calssObjs = []; //创建一个数组 用于收集子元素for（var i in childObjs）{//遍历子元素、判断类别、压入数组if（childObjs[i].className==clsName）{ calssObjs.push（childObjs[i]）;}}return calssObjs;}/** * 获取最小值的索引minIndex * @param arr * @param minH * @returns {string} */function getMinhIndex（arr,minH）{for（var i in arr）{if（arr[i]===minH）{return i;}}}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript扩展技巧总结》及《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。