javascript瀑布流布局实现方法详解
本文实例讲述了javascript瀑布流布局实现方法。分享给大家供大家参考，具体如下：
html结构：
<divid="waterfall"> <divclass="mod-box"> <divclass="mod-img">...</div> </div> <divclass="mod-box"> <divclass="mod-img">...</div> </div> <divclass="mod-box"> <divclass="mod-img">...</div> </div> </div>
css样式表：
*{margin:0;padding:0}
#waterfall{position:relative;}
.mod-box{
padding:15px0015px;
float:left;
}
.mod-img{
padding:9px;
border:1pxsolid#ccc;
border-radius:5px;
box-shadow:005px#ccc;
position:relative;
}
.mod-imgimg{
width:310px;
height:auto;
}
javascript代码：
window.onload=function(){
waterFall("waterfall","mod-box");
}
window.onscroll=scroll;
window.onresize=function(){
if(re)clearTimeout(re);
varre=setTimeout(function(){
waterFall("waterfall","mod-box");
},200);
}
vardataInit={
"data":[
{
"src":"5.jpg"
},
{
"src":"6.jpg"
}
]
};
/**
*滚动添加数据函数
*/
functionscroll(){
varflag=checkScroll("waterfall","mod-box");
if(flag){
varoparent=document.getElementById("waterfall");
varhtmlStr="";
varlen=dataInit.data.length;
for(vari=0;i<len;i++){
htmlStr+="";//需要插入的结构
}
oparent.innerHTML+=htmlStr;
waterFall("waterfall","mod-box");//重新调用一次
}
}
/**
*瀑布流函数
*@paramparentID容器id
*@paramclsName数据块className
*/
functionwaterFall(parentID,clsName){
varoParent=document.getElementById(parentID);//父级对象
//将content下所有class为mod-box的元素取出来
varoBoxs=getObjsByClassName(oParent,clsName);//获取存储块框clsName的数组oBoxs
varoBoxWidth=oBoxs[0].offsetWidth;//obox的宽==>310+9*2+2+15=345(包含边框和内边距)一个块框的宽
varpageWidth=document.documentElement.clientWidth;//页面可视宽度
//varpageWidth=document.documentElement.offsetWidth;//页面可视宽度
varcols=Math.floor(pageWidth/oBoxWidth);//计算整个页面显示的列数（页面宽/obox的宽）每行中能容纳的mod-box个数
varhAarr=[];//用于存储每列中的所有块框相加的高度。
varminH;
varminHIndex;//最小高度对应的索引值
for(vari=0;i<oBoxs.length;i++){//遍历数组aPin的每个块框元素
oBoxs[i].style.position="absolute";
if(i<cols){//把第一行排放好，并将每一列的高度记入数据hAarr
hAarr.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中的最小值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;//更新添加了块框后的列高
}
}
varmaxH=Math.max.apply(null,hAarr);
oParent.style.cssText="width:"+oBoxWidth*cols+"px;margin:0auto;height:"+maxH+"px;";//设置父级居中样式：定宽+自动水平外边距
}
/**
*检查是否符合加载数据（滚动到最后一个oBox）
*@paramparentID容器id
*@paramclsName数据块className
*@returns{boolean}
*/
functioncheckScroll(parentID,clsName){
varparentObj=typeofparentID=="object"?parentID:document.getElementById(parentID);
varoBoxs=getObjsByClassName(parentObj,clsName);
varlastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
varscrolltop=document.body.scrollTop||document.documentElement.scrollTop;
//标准模式与混杂模式
varheight=document.documentElement.clientHeight;//页面高度
return(lastBoxH<scrolltop+height)?true:false;
}
/**
*根据class获得元素
*@paramid
*@paramclsName
*@returns{Array}
*/
functiongetObjsByClassName(parentID,clsName){
varparentObj=typeofparentID=="object"?parentID:document.getElementById(parentID);
if(!parentObj){
return;
}
varchildObjs=parentObj.getElementsByTagName("*");//获取父级的所有子集
varcalssObjs=[];//创建一个数组用于收集子元素
for(variinchildObjs){//遍历子元素、判断类别、压入数组
if(childObjs[i].className==clsName){
calssObjs.push(childObjs[i]);
}
}
returncalssObjs;
}
/**
*获取最小值的索引minIndex
*@paramarr
*@paramminH
*@returns{string}
*/
functiongetMinhIndex(arr,minH){
for(variinarr){
if(arr[i]===minH){
returni;
}
}
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript扩展技巧总结》及《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。