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程序设计有所帮助。