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

前端之家收集整理的这篇文章主要介绍了javascript瀑布流布局实现方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了javascript瀑布流布局实现方法分享给大家供大家参考,具体如下:

html结构:

Box">
Box">
Box">

css样式表:

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代码

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;iBoxs.length;i++){//遍历数组aPin的每个块框元素 oBoxs[i].style.position="absolute"; if(iBoxs[i].offsetHeight); oBoxs[i].style.top=0+"px"; oBoxs[i].style.left=oBoxWidth*i+"px"; }else{ minH = Math.min.apply(null,hAarr); //数组hAarr中的最小值minH minHIndex = 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获取 父级的所有子集 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程序设计有所帮助。

原文链接:https://www.f2er.com/js/50100.html

猜你在找的JavaScript相关文章