文章描述：淺談個(gè)人在瀑布流網(wǎng)頁(yè)的實(shí)現(xiàn)中遇到的問(wèn)題和解決方法.

    先上Demo

    瀑布流排序 ： http://cued.xunlei.com/demos/publ/demo1.html

    瀑布流+無(wú)限拖 http://cued.xunlei.com/demos/publ/demo2.html

    隨著pinterest的走紅，瀑布流式的布局被越來(lái)越多的網(wǎng)站所使用，這種布局確實(shí)有很多好處，圖片列表頁(yè)有很強(qiáng)大的視覺(jué)感染力，而且還提高了用戶“發(fā)現(xiàn)好圖”的效率，

Pinterest采用瀑布流的方式網(wǎng)頁(yè)設(shè)計(jì)

。瀑布流的實(shí)現(xiàn)有很多種方式，之前淘寶UED有篇文章詳細(xì)的介紹過(guò)各種方式的優(yōu)劣。今天我們主要討論一下絕對(duì)排序來(lái)實(shí)現(xiàn)瀑布流的方式 即 Pinterest 采用的方式。

    首先說(shuō)下瀑布流的排序算法，參考demo1，思路非常簡(jiǎn)單，我們把瀑布流拆成三個(gè)部分來(lái)看：容器、列、格子

   

    1.先計(jì)算當(dāng)前屏幕最多能容納幾列瀑布，其值為 “向下取整（屏幕可見(jiàn)區(qū)域?qū)挾?（格子寬度+間距））”;

    2.為了保證容器的居中，將容器的寬度設(shè)置為 列數(shù)* （格子寬度+間距） – 間距，這里需要注意的是 當(dāng)容器的寬度計(jì)算出來(lái)之后再顯示，否則會(huì)造成頁(yè)面寬度的抖動(dòng)，影響體驗(yàn)。;

    3.排序開(kāi)始，先把前N（N為列數(shù)）個(gè)格子分別放到每一列中，然后每次尋找高度最小的一列，把格子放進(jìn)去（left值為列序號(hào)*（格子寬度+間距），top值為 列高+間距），并刷新列的高度，遍歷所有格子直到所有的格子都被排序。

    最后將事件句柄綁定到window.onload和window.onresize上，一個(gè)瀑布流布局的頁(yè)面就出來(lái)了。

    這樣的排序算法看起來(lái)很美好，可真正結(jié)合異步加載數(shù)據(jù)應(yīng)用到頁(yè)面里還要解決以下幾個(gè)問(wèn)題

    1.當(dāng)縮放瀏覽器窗口時(shí)會(huì)不斷地觸發(fā)事件，如果每次都響應(yīng)的話會(huì)狂耗性能，需要在縮放動(dòng)作結(jié)束后再執(zhí)行重排方法，

電腦資料

《Pinterest采用瀑布流的方式網(wǎng)頁(yè)設(shè)計(jì)》(http://www.msguai.com)。

    2.頁(yè)面滾動(dòng)到底部請(qǐng)求數(shù)據(jù)成功之后只對(duì)新增的節(jié)點(diǎn)重排。

    3.如果服務(wù)器無(wú)法給出圖片高度，需要在圖片加載完畢之后再進(jìn)行重排。

    第一個(gè)問(wèn)題我是用setTimeout和clearTimeout來(lái)解決的，思路是窗口變化之后開(kāi)始計(jì)時(shí)，如果窗口還在變換則從新開(kāi)始計(jì)時(shí)，窗口不再變化則延時(shí)（很短的時(shí)間）觸發(fā)重排事件。暫時(shí)只想到這個(gè)，這里應(yīng)該還有更好的方法。

    代碼如下

<code>var re;</p><p>    window.onresize = function（） {</p><p>    clearTimeout（re）;</p><p>    re = setTimeout（resize，100）;</p><p>    };</p><p>    </code>

    第二個(gè)問(wèn)題在于如果每次有新的數(shù)據(jù)加載，都要對(duì)整個(gè)容器內(nèi)的節(jié)點(diǎn)進(jìn)行重排，非常消耗性能。解決思路：

    1.將列保存在全局?jǐn)?shù)組中，每次重排或者新增格子之后更新數(shù)組的數(shù)據(jù)，這樣下次執(zhí)行排序算法的時(shí)候可以直接調(diào)用。

    2.將新增格子保存在數(shù)組中作為參數(shù)傳遞給排序算法，僅對(duì)新格子進(jìn)行遍歷和操作。

    第三個(gè)問(wèn)題是如果服務(wù)器無(wú)法給出圖片尺寸，那么必須在圖片完全加載完畢之后才可進(jìn)行排序（因?yàn)楦叨仁菍?shí)時(shí)獲取的，圖片不全高度有誤差），這里沒(méi)有什么好辦法，只能遍歷圖片，每張圖片加載成功后執(zhí)行一個(gè)回調(diào)函數(shù)，將加載成功的圖片數(shù)量+1，當(dāng)加載成功的圖片數(shù)量等于圖片總數(shù)的時(shí)候執(zhí)行排序方法。缺點(diǎn)是有一張圖片加載不成共就無(wú)法看到所有的，真正項(xiàng)目中還是需要在異步加載數(shù)據(jù)的時(shí)候獲取圖片尺寸。

    好了，以上就是在這次瀑布流實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題和解決方法，由一開(kāi)始加載3-4屏就卡死到現(xiàn)在可以無(wú)限加載（ff，chrome），深感優(yōu)化js的必要性和無(wú)限性。一點(diǎn)小心得寫(xiě)在這里權(quán)當(dāng)拋磚引玉，大家對(duì)瀑布流實(shí)現(xiàn)的優(yōu)化有什么見(jiàn)解歡迎一起交流討論。

    作者：xwei