幾點(diǎn)說明
1.本文所說的瀑布流指的是等寬不等高的瀑布流
2.本文使用的方法可以使用圖片延時(shí)加載而不會(huì)影響瀑布流效果
延時(shí)加載瀑布流實(shí)現(xiàn)的主要問題
主要的問題在于延時(shí)與圖片高度計(jì)算的沖突，延時(shí)加載完成前后圖片的高度是會(huì)發(fā)生變化的，瀑布流函數(shù)計(jì)算的每列高度不一定準(zhǔn)確，定位會(huì)出現(xiàn)問題。筆者先嘗試過使用絕對(duì)定位實(shí)現(xiàn)瀑布流布局，但是因?yàn)檠訒r(shí)加載問題，出來的效果并不是很理想，也嘗試過使用onload事件來觸發(fā)瀑布流函數(shù)，但是不知道具體什么原因定位還是不準(zhǔn)確。所以為了盡快完成工作任務(wù)，使用了本文的這個(gè)方式，思想基本相同，只是定位元素位置的方式是使用浮動(dòng)。因此也局限了瀑布流的列數(shù)只能是兩列，應(yīng)對(duì)移動(dòng)端應(yīng)該是夠用了。
瀑布流的幾種實(shí)現(xiàn)方式
1.絕對(duì)定位實(shí)現(xiàn)，通過JS計(jì)算每一列的高度，然后通過絕對(duì)定位來實(shí)現(xiàn)每個(gè)元素位置的排列以實(shí)現(xiàn)瀑布流的形式。
2.將屏幕分成等寬的若干列，每一列都是一個(gè)容器，通過計(jì)算每個(gè)容器的高度，將元素放在高度最低的容器中。
3.使用CSS3的多列布局，這個(gè)方法個(gè)人認(rèn)為實(shí)現(xiàn)起來比較簡(jiǎn)單，但是有一個(gè)問題，重新加載的內(nèi)容是頁面右側(cè)，而不是在頁面下方。想要用這種方法的去百度一下CSS3實(shí)現(xiàn)瀑布流網(wǎng)上有很多實(shí)例。
本文實(shí)現(xiàn)的代碼
JS代碼如下:
function water(){? ? ? ? ? ? var arrBox=$('#content').children('.box');//box對(duì)象? ? ? ? ? ? var arrBoxH=[];//數(shù)組，用于存儲(chǔ)左側(cè)列中的所有塊框相加的高度? ? ? ? ? ? var arrBoxR=[];//數(shù)組，用于存儲(chǔ)右側(cè)列中的所有塊框相加的高度for(var i=0;i rightNum) //比較兩側(cè)高度大小，決定為該box添加左浮動(dòng)還是右浮動(dòng)? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? arrBox.eq(i).removeClass();? ? ? ? ? ? ? ? ? ? ? ? arrBox.eq(i).addClass("box right");//左側(cè)較高為該box添加右浮動(dòng)? ? ? ? ? ? ? ? ? ? ? ? arrBoxR[i]=boxH;//將高度添加在右側(cè)數(shù)組? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ? arrBox.eq(i).removeClass();? ? ? ? ? ? ? ? ? ? ? ? arrBox.eq(i).addClass("box left");//右側(cè)較高為該box添加左浮動(dòng)? ? ? ? ? ? ? ? ? ? ? ? arrBoxH[i]=boxH;//將高度添加在左側(cè)數(shù)組? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? }
html代碼+css代碼
*{margin:0;padding:0;}#content{position:relative;margin:0auto;}.box{width:50%;float:left;}.boximg{width:100%;height:auto;display:block;}.left{float:left;}.right{float:right;}
