先上Demo

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

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

　　跟著pinterest的走紅，瀑布流式的結構被越來越多的網站所使用，這種結構確實有良多益處，圖片列表頁有很強年夜的視覺傳染力，而且還提高了用戶“發現好圖”的效率。瀑布流的實現有良多種體例，之前淘寶UED有篇文章具體的介紹過各類體例的口角。今天我們首要談判一下絕對排序來實現瀑布流的體例 即 Pinterest 采用的體例。

　　首先說下瀑布流的排序算法，參考demo1，思緒很是簡單，我們把瀑布流拆成三個部門來看：容器、列、格子

　　1.先計較當前屏幕最多能容納幾列瀑布，其值為 "向下取整(屏幕可見區域寬度/(格子寬度+間距))";

　　2.為了保證容器的居中，將容器的寬度設置為 列數* (格子寬度+間距) – 間距，這里需要注重的是 當容器的寬度計較出來之后再顯示，否則會造成頁面寬度的股栗，影響體驗。;

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

　　最后將事務句柄綁定到window.onload和window.onresize上，一個瀑布流結構的頁面就出來了。

　　這樣的排序算法看起來很夸姣，可真正連系異步加載數據應用到頁面里還要解決以下幾個問題

　　1.當縮放瀏覽器窗口時會不竭地觸發事務，如不美觀每次都響應的話會狂耗機能，需要在縮放動作竣事后再執行重排體例。

　　2.頁面滾動到底部請求數據成功之后只對新增的節點重排。

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

　　第一個問題我是用setTimeout和clearTimeout來解決的，思緒是窗口轉變之后起頭計時，如不美觀窗口還在變換則年夜新起頭計時，窗口不再轉變則延時(很短的時刻)觸發重排事務。且則只想到這個，這里應該還有更好的體例。

　　代碼如下

var re;

window.onresize = function() {

clearTimeout(re);

re = setTimeout(resize,100);

};

　　第二個問題在于如不美觀每次有新的數據加載，都要對折個容器內的節點進行重排，很是耗損機能。解決思緒：

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

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

　　第三個問題是如不美觀處事器無法給出圖片尺寸，那么必需在圖片完全加載完畢之后才可進行排序(因為高度是實時獲取的，圖片不全高度有誤差)，這瑯縵慊有什么好法子，只能遍歷圖片，每張圖片加載成功后執行一個回調函數，將加載成功的圖片數目+1，當加載成功的圖片數目等于圖片總數的時辰執行排序體例。錯誤謬誤是有一張圖片加載不成共就無法看到所有的，真正項目中仍是需要在異步加載數據的時辰獲取圖片尺寸。

　　好了，以上就是在此次瀑布流實現過程中碰著的問題息爭決體例，由一路頭加載3-4屏就卡死到此刻可以無限加載(ff,chrome)，深感優化js的需要性和無限性。一點小心得寫在這里權當拋磚引玉，巨匠對瀑布流實現的優化有什么看法接待一路交流談判。