瀑布流

瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入數據塊並附加至當前尾部。最早採用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。

基本介紹

• 中文名：瀑布流
• 外文名：waterfall flow
• 簡介：瀑布流，又稱瀑布流式布局
• 特點：琳琅滿目：整版以圖片為主
• 詞性：名詞

特點

1、琳琅滿目：整版以圖片為主，大小不一的圖片按照一定的規律排列。

2、唯美：圖片的風格以唯美的圖片為主。

瀑布流效果

3、操作簡單：在瀏覽網站的時候只需要輕輕滑動一下滑鼠滾輪，一切的美妙的圖片精彩便可呈現在你面前。

套用

瀑布流對於圖片的展現，是高效而具有吸引力的，用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶載入模式又避免了用戶滑鼠點擊的翻頁操作，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片布局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞，同時給人以不拘一格的感覺，切中年輕一族的個性化心理。國內類Pinterest網站也如雨後春筍般出現，已知網站超40家，類Pinterest網站有四種，一是電商導購，如想去網、蘑菇街和美麗說、好享說、依託於淘寶平台;二是興趣圖譜分享，如知美、花瓣等;三是在細分垂直領域，如針對吃貨的零食控、針對家居行業的他部落等。四是服裝款式設計資訊平台如看潮網等等。

優缺點

布局優點

1. 有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航連結或按鈕了。
2. 對觸屏設備來說，互動方式更符合直覺：在移動套用的互動環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低於點擊連結或按鈕。
3. 更高的參與度：以上兩點所帶來的互動便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。

布局缺點

1. 有限的用例：

無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。

例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。

2. 額外的複雜度：

那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。

3. 再見了，頁腳：

如果使用了比較典型的無限滾動載入模式，這就意味著你可以和頁腳說拜拜了。

最好考慮一下頁腳對於你的網站，特別是用戶的重要性;如果其中確實有比較重要的內容或連結，那么最好換一種更傳統和穩妥的方式。

千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動載入的內容突然出現而無論如何都無法點擊頁腳中的連結時，他們會變的越發憤怒。

4. SEO：

集中在一頁當中動態載入數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來說，在這方面進行冒險是很不划算的。

5. 關於頁面數量的印象：

其實站在用戶的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你並不適用。

常見網站

鼻祖：Pinterest

通用類：豆瓣市集，花瓣網，我喜歡，讀圖知天下

美女圖片：圖麗網

時尚資訊類：看潮網

時尚購物類：蘑菇街，美麗說，人人逛街，卡當網

品牌推廣類：凡客達人

家居o2o類：新巢網小貓家

微博社交類： 都愛看

搞笑圖片類：道趣兒

藝術收藏類：微藝術

潮流圖文分享：荷都分享網

採用瀑布流網站例舉

實現方式

1、傳統多列浮動。代表網站蘑菇街和哇喔。

2、用CSS3實現。

3、絕對定位。代表網站Pinterest。

或者用圖片延遲載入。