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

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

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

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

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

淘寶網(wǎng)

http://www.fengche.com/

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

迷尚

發(fā)現(xiàn)啦

http://faxianla.com/

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

知美

http://www.zhimei.com/

無限拖。能根據(jù)屏幕大小調(diào)整列數(shù)。個人感覺太密，與圈樂一樣。它的loading，與發(fā)現(xiàn)啦，堆糖都是很有意思。

堆糖

http://www.duitang.com/

四列。發(fā)出十次請求后出現(xiàn)分頁欄。磚頭有很質(zhì)感。

花瓣

http://huaban.com/

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

拼范

http://www.pinfun.com/

最多六列，最小四列，視屏幕而定。如果圖片還沒有加載到時，會出現(xiàn)一段文字，讓用戶先看賞析?；旧蠜]有什么缺點(diǎn)，就有六列時有點(diǎn)密，在我的1440*900下。

美麗說

http://www.meilishuo.com/

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

萌胡同

http://www.menghutong.com/

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

蘑菇街

http://www.mogujie.com/

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

貝殼網(wǎng)

http://www.buykee.com/

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

開心品集

http://jipin.kaixin001.com/

五列。無限拖。在自適應(yīng)上處理得非常好。

推他

http://www.tuita.com/

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

愛采圖

http://jipin.kaixin001.com/

六列。磚頭非常簡潔。

91美圖網(wǎng)

http://www.91meitu.net/

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

---

蛋花兒

http://danhuaer.com/

扇貝

http://www.shanbei.com/

新版百度空間

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

優(yōu)化建議：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。