三种方式实现瀑布流布局
分别使用javascript,jquery,css实现瀑布流布局:
第一种方式:使用JavaScript:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>瀑布流布局</title> <style> *{padding:0;margin:0;} .clearfix:after, .clearfix:before{ content:""; display:table; } .clearfix:after{ clear:both; } .main{ position:relative; -webkit-column-width:210px; -moz-column-width:210px; -webkit-column-gap:5px; -moz-column-gap:5px; } .box{ float:left; padding:15px0015px; } .box.pic{ width:180px; height:auto; padding:10px; border-radius:5px; box-shadow:005px#cccccc; border:1pxsolid#cccccc; } .box.picimg{ display:block; width:100%; } </style> </head> <body> <divclass="mainclearfix"id="main"> <divclass="box"> <divclass="pic"><imgsrc="./images/0.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/1.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/2.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/3.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/4.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/5.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/6.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/7.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/8.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/9.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/10.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/11.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/12.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/13.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/14.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/15.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/16.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/17.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/18.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/19.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/20.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/21.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/22.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/23.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/24.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/25.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/26.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/27.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/28.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/29.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/25.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/26.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/27.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/28.jpg"></div> </div> <divclass="box"> <divclass="pic"><imgsrc="./images/29.jpg"></div> </div> </div> <script> window.onload=function(){ waterfall('main','box'); //模拟json数据 vardataJson={'data':[{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; //监听scroll事件 window.onscroll=function(){ varisPosting=false; if(checkScollSlide('main','box')&&!isPosting){ varoParent=document.getElementById('main'); for(variindataJson.data){ isPosting=true; varoBox=document.createElement('div'); oBox.className='box'; oBox.innerHTML='<divclass="pic"><imgsrc="./images/'+dataJson.data[i].src+'"></div>'; oParent.appendChild(oBox); } isPosting=false; waterfall('main','box'); } } } /* *parent父元素idclsName块元素类*/ functionwaterfall(parent,clsName){ //获取父元素 varoParent=document.getElementById(parent), //获取所有box aBoxArr=oParent.getElementsByClassName(clsName), //单个box宽度 iBoxW=aBoxArr[0].offsetWidth, //列数 cols=Math.floor(document.documentElement.clientWidth/iBoxW); oParent.style.cssText='width:'+iBoxW*cols+'px;margin:0auto;'; //储存所有的高度 varhArr=[]; for(vari=0;i<aBoxArr.length;i++){ if(i<cols){ hArr[i]=aBoxArr[i].offsetHeight; }else{ //获取hArr最小值 varminH=Math.min.apply(null,hArr), //hArr最小值索引index minHIndex=getMinHIndex(hArr,minH); aBoxArr[i].style.cssText='position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;'; //添加元素之后更新hArr hArr[minHIndex]+=aBoxArr[i].offsetHeight; } } } //获取最小值索引 functiongetMinHIndex(arr,val){ for(variinarr){ if(arr[i]==val){ returni; } } } //检查是否满足加载数据条件,parent父元素idclsName块元素类 functioncheckScollSlide(parent,clsName){ varoParent=document.getElementById(parent), aBoxArr=oParent.getElementsByClassName(clsName), //最后一个box元素的offsetTop+高度的一半 lastBoxH=aBoxArr[aBoxArr.length-1].offsetTop+aBoxArr[aBoxArr.length-1].offsetHeight/2, //兼容js标准模式和混杂模式 scrollTop=document.documentElement.scrollTop||document.body.scrollTop, height=document.documentElement.clientHeight||document.body.clientHeight; returnlastBoxH<scrollTop+height?true:false; } </script> </body> </html>
第二种方式:使用jquery:(html结构跟css同上)
$(window).on("load",function(){ waterfall('main','box'); //模拟数据json vardataJson={'data':[{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; window.onscroll=function(){ varisPosting=false; if(checkscrollside('main','box')&&!isPosting){ isPosting=true; $.each(dataJson.data,function(index,dom){ var$box=$('<divclass="box"></div>'); $box.html('<divclass="pic"><imgsrc="./images/'+$(dom).attr('src')+'"></div>'); $('#main').append($box); waterfall('main','box'); isPosting=false; }); } } }); /* parend父级id clsName元素class */ functionwaterfall(parent,clsName){ var$parent=$('#'+parent);//父元素 var$boxs=$parent.find('.'+clsName);//所有box元素 variPinW=$boxs.eq(0).width()+15;//一个块框box的宽 varcols=Math.floor($(window).width()/iPinW);//列数 $parent.width(iPinW*cols).css({'margin':'0auto'}); varpinHArr=[];//用于存储每列中的所有块框相加的高度。 $boxs.each(function(index,dom){ if(index<cols){ pinHArr[index]=$(dom).height();//所有列的高度 }else{ varminH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH varminHIndex=$.inArray(minH,pinHArr); $(dom).css({ 'position':'absolute', 'top':minH+15, 'left':$boxs.eq(minHIndex).position().left }); //添加元素后修改pinHArr pinHArr[minHIndex]+=$(dom).height()+15;//更新添加了块框后的列高 } }); } //检验是否满足加载数据条件,即触发添加块框函数waterfall()的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) functioncheckscrollside(parent,clsName){ //最后一个块框 var$lastBox=$('#'+parent).find('.'+clsName).last(), lastBoxH=$lastBox.offset().top+$lastBox.height()/2, scrollTop=$(window).scrollTop(), documentH=$(document).height(); returnlastBoxH<scrollTop+documentH?true:false; }
第三种方式:使用css:(html结构同上)
.clearfix:after, .clearfix:before{ content:""; display:table; } .clearfix:after{ clear:both; } .main{ position:relative; [color=#ff0000]-webkit-column-width:210px; -moz-column-width:210px; -webkit-column-gap:5px; -moz-column-gap:5px;[/color] } .box{ float:left; padding:15px0015px; } .box.pic{ width:180px; height:auto; padding:10px; border-radius:5px; box-shadow:005px#cccccc; border:1pxsolid#cccccc; } .box.picimg{ display:block; width:100%; }
瀑布流实现方式比较:
Javascript原生方式/jquery方式
1、需要计算,列数=浏览器窗口宽度/图片宽度,图片定位是根据每一列的高度计算下来图片的位置;
2、图片排序是按照图片计算的位置横向排列,位置是计算出来的,比较规范
Css方式
1、不需要计算,浏览器自动计算,只需设置列宽,性能高;
2、列宽随着浏览器窗口大小进行改变,用户体验不好;
3、图片排序按照垂直顺序排列,打乱图片显示顺序;
4、图片加载还是依靠javascript/jquery实现
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!