引用：http://www.cnblogs.com/rubylouvre/archive/2012/04/18/2455222.html

很難說這東西是什么時候山寨到國內，反正現狀就是一涌而上，到處是瀑布流。瀑布流的鼻祖是Pinterest，圖片網。圖片網令我想起了各種相冊，如最著名的Flickr。但區區Pinterest一小站，能夠獨行特立，引領潮流，可見創新的力量。

snatchly.com 最棒的瀑布流 不解釋

瀑布流有兩大元素，圖片與無限拖。圖片要力求鮮麗奪目，畢竟它的每一張圖片就是一個廣告。因為瀑布流就是一個廣告墻，琳瑯滿目的廣告，鋪天蓋地的廣告。我們也不管這些廣告是否互相干擾，反正它的本意就是給人一種逛街的感覺，因此這些網站的站名起得也很貼切，什么“蘑菇街”，“美麗說”，“發現啦”，或干脆叫“逛”！這些網站基本上是導購網站，面向的是女性用戶，吸引眼球是非常重要的。為了保證圖片質量，僅靠圖片色度的分析算法是不行，人網推薦勢在必行，我不相信，僅靠用戶上傳，“花瓣網”首頁的圖片質量能高成這樣。

無限拖讓我想起twitter，通過滾動不斷加載新內容。不停的是改成“磚頭”——瀑布流里面一塊塊的東西，以圖片為中心。相應的技術也早已成熟，就叫scrollLoad，或叫lazyload。由于圖片高度不一，磚頭也高度不一，添加磚頭還是需要一點技巧的。現在流行欄柵布局（相對CSS框架而言），因此瀑布流其實是分為幾列的，每次添加磚頭時，都往最短的那一列添加，以保證某一列不會太長，而另一列只有幾塊磚頭。有關瀑布的注意問題，我在后面會說，現在大家先欣賞一下美圖吧。

淘寶網

http://www.fengche.com/

三列，不過每塊磚頭含有多個圖片。發出兩次請求就必須通過點擊才能加載更多磚頭，這難道是出于節省流量的考量嗎？腦殘！失去了無限拖的爽快感了。

迷尚

發現啦

http://faxianla.com/

自適應布局。經典的無限拖。會出現很長的圖片。拖著拖著，還會在右下角出現一個標簽云作推薦。沒有注冊或登陸，拖著拖著會出現彈出層提示注冊或登陸，因此這PM也是吃屎長大的！類庫采用KISSY與seajs，其他有jQuery的垃圾網有技術含量。注意燈箱效果時，后面的瀑布流還能緩緩流動。

知美

http://www.zhimei.com/

無限拖。能根據屏幕大小調整列數。個人感覺太密，與圈樂一樣。它的loading，與發現啦，堆糖都是很有意思。

堆糖

http://www.duitang.com/

四列。發出十次請求后出現分頁欄。磚頭有很質感。

花瓣

http://huaban.com/

五列。并且將一個標簽云作為瀑布流的第一塊磚頭放在左上角，有效利用空間。會出現很長的圖片。無限拖。圖片質量超高。里面包含的資訊比像其他瀑布流豐富多了！找不到明顯的缺點，是我們學習的榜樣。

拼范

http://www.pinfun.com/

最多六列，最小四列，視屏幕而定。如果圖片還沒有加載到時，會出現一段文字，讓用戶先看賞析。基本上沒有什么缺點，就有六列時有點密，在我的1440*900下。

美麗說

http://www.meilishuo.com/

五列。沒有注冊或登陸，拖著拖著會出現彈出層提示注冊或登陸，惡心。發出三次請求后出現分頁欄。

萌胡同

http://www.menghutong.com/

五列。沒有注冊或登陸，拖著拖著會出現彈出層提示注冊或登陸，惡心。沒有發出請求。磚頭都是PHP拼好放在頁面上。通過點擊分頁欄呈現另一個瀑布。

蘑菇街

http://www.mogujie.com/

四列。沒有注冊或登陸，和上面的一個毛病，抄人家的，缺點也照搬了，與TX新聞客戶端一個德性。發出8次請求后出現分頁欄。

貝殼網

http://www.buykee.com/

四列。數據有限，總是讓人看到頁尾，非常不爽。

開心品集

http://jipin.kaixin001.com/

五列。無限拖。在自適應上處理得非常好。

推他

http://www.tuita.com/

為什么不叫“推她”？！四列，無限拖。個人很喜歡它那個top banner。一開始沒有指定圖片高寬，有嚴重的reflow。是傳說中的“輕微博”……

愛采圖

http://jipin.kaixin001.com/

六列。磚頭非常簡潔。

91美圖網

http://www.91meitu.net/

盡是美女的瀑布流，中國最有前途的瀑布流! 內容為王，其他都是虛的！

---

蛋花兒

http://danhuaer.com/

扇貝

http://www.shanbei.com/

新版百度空間

http://hi.baidu.com/new/ncpjyw

優化建議：

• 瀑布流就是廣告流，無盡的廣告，圖片的質量必須高。為了綠葉襯紅花，網頁的背景正如各位看客所見，基本上使用奶白色，搭什么也好看。當然你也可以像那樣使用一個地板圖片做背景，很有人文氣質哦！
• 出于自適應布局的需要，頁眉與頁尾不如出現復雜的UI，比如弄個圖片輪播。圖片輪播的目的就是做廣告，瀑布流也是一堆廣告，有見過為廣告做廣告的嗎？！而且這也不好實現自適應。
• 自適應無異乎是監聽resize事件，但不能一resize就調整瀑布流，應該存在一個閥值。
• 使用絕對定位方式搬磚頭太復雜了，對瀑布流的自適應尤為不利。應該用幾個DIV作為列的容器，通過浮動方式構建瀑布。
• 雖然我們可以通過complete知道圖片是否加載成功，并據此進行下一次磚頭的插入操作，但還要考慮瀏覽器的reflow問題。實踐中，遇到mac safari這樣的SB瀏覽器，性能嚴重不濟，因此還是叫高工資的后端人員多做一些活，提早把圖片的高寬傳給你吧。
• 瀑布流拖著拖著見底的問題，需要插入幾塊磚頭后，人工干擾scrollTop的位置。
• 磚頭是廣告的載體，不應該把太多功能，至少不能讓人一下子看到這么多東西，以免嘩賓奪主。如果人們就是無限拖，沒有停下來欣賞圖片的話，說明這些廣告做得太失敗了！從技術層面來說，磚頭的DOM結構要盡量簡單，畢竟是無限拖，能顯示越多的磚頭就越好，不能拖一下就卡死了。
• 圖片應該大，換言之，重視廣告的效果。這也意味著，用戶的注意力不會一下子被過小的廣告圖打散。
• 列不能過密。本來就是玩密集效應，踩鋼琴線的。
• 嚴重反感拖著拖著出現注冊界面！
• 嚴重反感拖著拖著出現分頁欄，這種“微創新”一無是處，打斷用戶持續的體驗過程。有時我在想，分頁欄的出現是不是讓人們看一下底部那個備案內容啊……

總結

以上是生活随笔為你收集整理的瀑布流分析的全部內容，希望文章能夠幫你解決所遇到的問題。

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