市面上已存在的瀑布流式布局的網站：
拼范網：http://www.pinfun.com/
迷尚網：http://www.mishang.com/
凡客達人：http://star.vancl.com/
美麗說：http://www.meilishuo.com/
蘑菇街：http://www.mogujie.com/welcome/
淘寶哇哦：http://wow.taobao.com/
IDsoo：http://idsoo.com/
Topit：http://topit.me/
Mark之：http://markzhi.com/
布兜：http://www.budou.me/
堆糖：http://www.duitang.com/
花瓣：http://huaban.com/
碼圖網：http://www.markpic.com/popular/
新鮮網：http://www.xinxian.com/
易驚喜：http://www.ejingxi.com/

這兩年瀑布流式布局已小有規模，對于瀏覽器性能問題是個挑戰。
瀑布流目前已知有三種實現方式，[我喜歡]采用的是絕對定位的方式進行瀑布流計算。總結一下性能中注意的幾點：

要點一：
對于瀑布流式圖片布局性能起決定性作用的是img標簽必須指定height(width在瀑布流式布局中一般是固定的)：
網頁的加載順序是dom會優先加載完成，然后加載遠程文件包括圖片。絕對定位方式在dom加載完成后會進行計算，然而此時如果沒有為img標簽指定width與height，會等到圖片加載完成瀏覽器才會渲染出整個元素的高度。所以在dom加載完成之后計算的元素高度是不正確的，確切的說是沒有圖片的高度的。

要點二：
Ajax動態插入瀑布元素

當通過ajax獲取到新數據之后如何追加到當前瀑布流中呢？
起初為了性能優化打算輪循把元素插入到頁面各列中，但是頁面中的圖片高度是不定的，很容易出現高度很高的圖片，會留有很不和諧的多余空白，可兼容性差。
最后采用的第二步方案，實時獲取元素底部最高的元素輪循插入。即上圖中的第2列優先獲得插入元素的權利，完成插入后再計算底部最高的元素。
這時就需要性能優化，我們不能每次都動態去取每個元素底部的高度，可以把六個列的值放在一個數組中，依次記錄著每列的最后元素的底部高度。再進行對比計算，算出最小高度進行插入。
PS：為性能優化，插入動態數據時輪循的是動態要加入的元素，而非整個頁面的所有元素。

要點三：
Dom元素相關的數據重復計算？
當頁面Dom加載完成后，獲取瀑布流父元素的寬度，根據元素的寬度和間距，計算出有幾列，各列絕對定位的left值等…這些數據都要緩存在內存變量中。不是每次執行瀑布流操作都去動態獲取計算的。

要點四：
刪除中瀑布流中的元素，如何重新排列？
此次版本中刪除某個瀑布流元素后，是重新排列頁面中所有的元素，雖然封裝的方法很簡便，但是這樣是不夠優化的。
后期計劃，刪除某列中的某個元素， 此列被刪除元素下面的元素重新計算排列，減少性能消耗，達到優化。

要點五：
關于改變窗口大小，動態排列
在改變窗口大小的過程，由于onresize在IE多個版本下會有多次觸發，每觸發一次，瀑布就會重新排列一次，重復執行浪費了性能。
因此在onresize事件中添加延遲優化處理

此版本還有許多細節及優化沒有來得及時間處理，后期我們會跟進。希望大家喜歡這個項目，有什么意見請聯系我們。
隨后我們會將優化QWrap的這個WaterFall擴展組件，提供給QWrap用戶使用，豐富組件。

在此感謝QWrap庫開發者們的辛勤付出，讓開發者有了更多的選擇，節省了開發時間，達到敏捷開發。

?

—–20120224更新-添加刪除瀑布流元素整列重新排序（↑要點四）———————————————————————————————-
使用方法見Demo可組件js文件，由于沒有指定圖片高度，所以瀑布流事件是在頁面完全加載之后觸發的。

Demo地址：http://www.im9527.com/archives/8

轉載于:https://www.cnblogs.com/miss-radish/p/3641876.html

總結

以上是生活随笔為你收集整理的【转】关于WaterFall瀑布流式布局的性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。