轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.lapeinture.cn )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.woshipm.com/design/24999.html
瀑布流的布局方式展現(xiàn)的內(nèi)容通常是扁平化、瑣碎的東西。首先吸引人的應(yīng)該是圖片，并且圖片是那種參差不齊的，如果瀑布流中文字過多，會(huì)給人很雜亂的感覺，所以瀑布流更適合單純的圖片瀏覽。
前不久360公司上線的項(xiàng)目–360圖片搜索的美女秀場頻道，就用到了瀑布流的布局方式，這種純粹的看美女圖片的頁面用瀑布流還是挺合適的。
以前并未開發(fā)過瀑布流布局的網(wǎng)站，第一個(gè)想到的實(shí)現(xiàn)方式就是多列浮動(dòng)，從表面上看這種方式要簡單。
但是，目前主流的瀑布流布局都是采用定位的方式，對(duì)每個(gè)單元格計(jì)算定位值，如下圖：
定位的方式實(shí)現(xiàn)起來其實(shí)也簡單，在窗口 resize 時(shí)，也可以方便的對(duì)單元格進(jìn)行重新計(jì)算排序。但是計(jì)算的頻率比較高，如果要做無限的加載數(shù)據(jù)，以及 resize 時(shí)的自適應(yīng)排列，那么性能就是一個(gè)必須要重視的問題。
如果沒有任何優(yōu)化手段，成百上千個(gè)單元格本身就很耗資源，resize 時(shí)再全部重新計(jì)算一遍，可以想象瀏覽器在這個(gè)時(shí)候一定很吃力，必然會(huì)有瀏覽器假死的情況。
再來看看多列浮動(dòng)布局的實(shí)現(xiàn)方式，多個(gè)單元格組成一列，無需對(duì)單個(gè)的單元格進(jìn)行定位的計(jì)算，然后對(duì)整列進(jìn)行浮動(dòng)，如下圖：
當(dāng)然，這種布局方式在無限加載和 resize 時(shí)的自適應(yīng)面前，面對(duì)著同樣的問題。
先說 resize 時(shí)的布局自適應(yīng)，雖然浮動(dòng)布局的計(jì)算沒有定位那么方便，但要實(shí)現(xiàn)自適應(yīng)的布局還是可以的。比如原來有 4 列，resize 時(shí)頁面寬度變小了，只能放 3 列了，單元格的總數(shù)是不變的，數(shù)據(jù)的順序也是固定的，那么只有把原來 4 列里面的單元格全部清空，按照數(shù)據(jù)的順序重新計(jì)算排序，依次添加到 3 列中。需要注意的是清空的時(shí)候并不是把單元格的 DOM 元素給刪除掉，而是從 DOM 樹提取出來存放在一個(gè)文檔碎片中，這樣就避免了每次都要去創(chuàng)建單元格的 DOM 元素，節(jié)省了創(chuàng)建時(shí)的性能開銷，說得通俗點(diǎn)就是離線操作。
瀏覽器中運(yùn)行的 WEB 程序并不能像桌面軟件那樣會(huì)有足夠多的 CPU 和內(nèi)存去使用。當(dāng)網(wǎng)頁中的 DOM 元素的數(shù)量呈指數(shù)倍的增長，那么其占用的內(nèi)存也勢必會(huì)成正比的增長，每個(gè) DOM 元素都會(huì)有性能開銷，只是通常情況下 DOM 的數(shù)量并沒有達(dá)到需要注意型性能的那個(gè)闕值。
無限加載的瀑布流就必須要注意這種由于 DOM 數(shù)量龐大而引發(fā)出來的性能問題。不能抱著僥幸的心理去認(rèn)為用戶可能滾動(dòng)不了多長就會(huì)跳出。此次做的瀑布流布局的項(xiàng)目壓根就沒有內(nèi)頁，都是浮層直接展示大 圖，雖說在一定程度上方便了用戶，但同時(shí)也給瀏覽器端很大的性能壓力。用戶如果不需要跳轉(zhuǎn)一直停留在瀑布流的列表頁，只要不關(guān)閉這個(gè)頁面，內(nèi)存就會(huì)一直沒 有釋放的機(jī)會(huì)。
雖然頁面可以無限長，但是用戶的顯示器的可視區(qū)域是有限的，就好比一個(gè)再富有的人，他晚上睡覺時(shí)占的面積還是那么大，床的面積也是有限的。由于可視 區(qū)域是有限的，通常會(huì)利用這一點(diǎn)對(duì)沒加載的 DOM 元素作延遲加載，那么反過來，能否對(duì)已加載的但不在可視區(qū)域的 DOM 元素做文章呢？答案是肯定的，人有多大膽，地有多大產(chǎn)嘛。
當(dāng)頁面向下滾動(dòng)的時(shí)候，瀑布流會(huì)創(chuàng)建新的單元格，老的單元格就會(huì)隨著頁面的向下滾動(dòng)而處于非可視范圍，既然都不可見了，那么為了節(jié)省性能完全可以把 這些老單元格刪除掉。當(dāng)然，也要有技巧性的去刪除。如果頁面往上滾，滾回去的時(shí)候你總不能給用戶看白板，不能這樣坑人。那么原來刪除的還得保持原位置加回 去。不悠著點(diǎn)的話，光是這樣一刪一加的兩個(gè)動(dòng)作就夠?yàn)g覽器受的了。作為 WEB 開發(fā)者，要時(shí)刻都有瀏覽器是很脆弱的如芒在背的心理。
上面說到的有技巧性的刪除就是將那些處于非可視區(qū)域的 DOM 元素從 DOM 樹中提取出來，存儲(chǔ)在一個(gè)文檔碎片的容器中。DOM 元素脫離了 DOM 樹也會(huì)大大節(jié)省性能的開銷，這樣就達(dá)到了節(jié)省性能的目的。當(dāng)然如果僅僅只做到這一步還不太好意思說是技巧。正是因?yàn)檫@個(gè)，我將 HTML 結(jié)構(gòu)再包裹一層，在 ul 外面添加了一個(gè)div ，稱之為一組，其真實(shí)結(jié)構(gòu)如下圖所示。
在這里，組是比列更大的單位，一組可以是可視區(qū)域大小的尺寸( 目前組還沒到針對(duì)不同的分辨率 )，一組里面就是浮動(dòng)的自適應(yīng)屏幕分辨率的幾列，每列里面就是一個(gè)個(gè)的單元格。如上圖，這樣幾列就可以組成一組。有了組就可以比較方便的將頻繁出入于 DOM 樹中的 DOM 元素的性能開銷平衡的分配到每一組?？梢栽陧撁鏉L動(dòng)向下到指定的位置，只刪除某一組，繼續(xù)向下滾再繼續(xù)刪除。每次都刪除處于最頂端的那一組，因?yàn)槭窃诜强?視區(qū)域內(nèi)，用戶也不會(huì)知道你的刪除操作。
頁面的高度是由一個(gè)個(gè)單元格給撐起來的，刪除了單元格后，其高度就會(huì)出現(xiàn)變化，由此就會(huì)導(dǎo)致頁面的高度也跟著變化。在刪除前計(jì)算出組元素的高度，然后設(shè)置其 visibility 為 hidden，讓其在刪除后還保留組元素原有的位置和高度，這樣就不會(huì)有高度的變化了。
通過的刪除非可視區(qū)域的 DOM 元素的優(yōu)化方法，可以讓頁面始終保持1-2組單元格，只要你組內(nèi)的單元格的數(shù)量能把握好。這樣就在一定程度上大大的緩解了了頁面中由于 DOM 數(shù)量過多而出現(xiàn)的性能開銷的問題。
當(dāng)窗口 resize 達(dá)到重新排序的寬度條件時(shí)，還是要將頁面中所有單元格重新計(jì)算排序。由于非可視區(qū)域的單元格已經(jīng)不在 DOM 樹中，那么其計(jì)算也沒什么壓力了。那些存儲(chǔ)在文檔碎片容器中的單元格也還是需要計(jì)算的，因?yàn)槿绻藭r(shí)頁面往上滾動(dòng)時(shí)那些離線的單元格還要重新和用戶見面 嘛，只是這個(gè)計(jì)算并不是在 DOM 樹中而已。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn