window.onresize = function() {
clearTimeout(re);
re = setTimeout(resize,100);
};
第二個問題在于如果每次有新的數據加載,都要對整個容器內的節點進行重排,非常消耗性能。解決思路:
1.將列保存在全局數組中,每次重排或者新增格子之后更新數組的數據,這樣下次執行排序算法的時候可以直接調用。
2.將新增格子保存在數組中作為參數傳遞給排序算法,僅對新格子進行遍歷和操作。
第三個問題是如果服務器無法給出圖片尺寸,那么必須在圖片完全加載完畢之后才可進行排序(因為高度是實時獲取的,圖片不全高度有誤差),這里沒有什么好辦法,只能遍歷圖片,每張圖片加載成功后執行一個回調函數,將加載成功的圖片數量 1,當加載成功的圖片數量等于圖片總數的時候執行排序方法。缺點是有一張圖片加載不成共就無法看到所有的,真正項目中還是需要在異步加載數據的時候獲取圖片尺寸。
好了,以上就是在這次瀑布流實現過程中遇到的問題和解決方法,由一開始加載3-4屏就卡死到現在可以無限加載(ff,chrome),深感優化js的必要性和無限性。一點小心得寫在這里權當拋磚引玉,大家對瀑布流實現的優化有什么見解歡迎一起交流討論。