先上Demo

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

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

　　跟著pinterest的走紅，瀑布流式的結(jié)構(gòu)被越來(lái)越多的網(wǎng)站所使用，這種結(jié)構(gòu)確實(shí)有良多益處，圖片列表頁(yè)有很強(qiáng)年夜的視覺(jué)傳染力，而且還提高了用戶“發(fā)現(xiàn)好圖”的效率。瀑布流的實(shí)現(xiàn)有良多種體例，之前淘寶UED有篇文章具體的介紹過(guò)各類體例的口角。今天我們首要談判一下絕對(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è)面寬度的股栗，影響體驗(yàn)。;

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

　　最后將事務(wù)句柄綁定到window.onload和window.onresize上，一個(gè)瀑布流結(jié)構(gòu)的頁(yè)面就出來(lái)了。

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

　　1.當(dāng)縮放瀏覽器窗口時(shí)會(huì)不竭地觸發(fā)事務(wù)，如不美觀每次都響應(yīng)的話會(huì)狂耗機(jī)能，需要在縮放動(dòng)作竣事后再執(zhí)行重排體例。

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

　　3.如不美觀處事器無(wú)法給出圖片高度，需要在圖片加載完畢之后再進(jìn)行重排。

　　第一個(gè)問(wèn)題我是用setTimeout和clearTimeout來(lái)解決的，思緒是窗口轉(zhuǎn)變之后起頭計(jì)時(shí)，如不美觀窗口還在變換則年夜新起頭計(jì)時(shí)，窗口不再轉(zhuǎn)變則延時(shí)(很短的時(shí)刻)觸發(fā)重排事務(wù)。且則只想到這個(gè)，這里應(yīng)該還有更好的體例。

　　代碼如下

var re;

window.onresize = function() {

clearTimeout(re);

re = setTimeout(resize,100);

};

　　第二個(gè)問(wèn)題在于如不美觀每次有新的數(shù)據(jù)加載，都要對(duì)折個(gè)容器內(nèi)的節(jié)點(diǎn)進(jìn)行重排，很是耗損機(jī)能。解決思緒：

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

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

　　第三個(gè)問(wèn)題是如不美觀處事器無(wú)法給出圖片尺寸，那么必需在圖片完全加載完畢之后才可進(jìn)行排序(因?yàn)楦叨仁菍?shí)時(shí)獲取的，圖片不全高度有誤差)，這瑯縵慊有什么好法子，只能遍歷圖片，每張圖片加載成功后執(zhí)行一個(gè)回調(diào)函數(shù)，將加載成功的圖片數(shù)目+1，當(dāng)加載成功的圖片數(shù)目等于圖片總數(shù)的時(shí)辰執(zhí)行排序體例。錯(cuò)誤謬誤是有一張圖片加載不成共就無(wú)法看到所有的，真正項(xiàng)目中仍是需要在異步加載數(shù)據(jù)的時(shí)辰獲取圖片尺寸。

　　好了，以上就是在此次瀑布流實(shí)現(xiàn)過(guò)程中碰著的問(wèn)題息爭(zhēng)決體例，由一路頭加載3-4屏就卡死到此刻可以無(wú)限加載(ff,chrome)，深感優(yōu)化js的需要性和無(wú)限性。一點(diǎn)小心得寫在這里權(quán)當(dāng)拋磚引玉，巨匠對(duì)瀑布流實(shí)現(xiàn)的優(yōu)化有什么看法接待一路交流談判。