瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。

瀑布流的特點

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

2、唯美：圖片的風(fēng)格以唯美的圖片為主。

3、操作簡單：在瀏覽網(wǎng)站的時候只需要輕輕滑動一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。

瀑布流的應(yīng)用

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

瀑布流布局優(yōu)點

有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。

對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動進行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠遠低于點擊鏈接或按鈕。

更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。

瀑布流布局缺點

1、 有限的用例：

無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。

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

2、 額外的復(fù)雜度：

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

3、 再見了，頁腳：

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

最好考慮一下頁腳對于你的網(wǎng)站，特別是用戶的重要性;如果其中確實有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。

千萬不要耍弄你的用戶，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動加載的內(nèi)容突然出現(xiàn)而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發(fā)憤怒。

4、 SEO：

集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)，與一頁一頁的輸出相比，究竟那種方式更利于SEO，這是你必須考慮的問題。對于某些以類型網(wǎng)站來說，在這方面進行冒險是很不劃算的。

5、 關(guān)于頁面數(shù)量的印象：

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