本文实例讲述了javascript瀑布流布局实现方法。分享给大家供大家参考，具体如下：
html结构：
rush:xhtml;">
Box">
Box">
Box">
css样式表：
rush: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代码：
rush:js;">
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;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 (lastBoxHaram 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程序设计有所帮助。
