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

瀑布流的特點(diǎn)

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

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

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

瀑布流的應(yīng)用

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

瀑布流布局優(yōu)點(diǎn)

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

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

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

瀑布流布局缺點(diǎn)

1、 有限的用例：

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

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

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

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

3、 再見了，頁(yè)腳：

如果使用了比較典型的無(wú)限滾動(dòng)加載模式，這就意味著你可以和頁(yè)腳說(shuō)拜拜了。

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

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

4、 SEO：

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

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

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