瀑布流 (Waterfall Layout)，又稱瀑布流式布局，是資訊流網格布局的一種視覺形式。顧名思義，這種布局形式既像瀑布一樣無限向下傾瀉，内容又如水一樣沒有固定樣式。
是以我們可以總結出瀑布流的兩個最核心的時間特征：
1.無限加載
2.内容等寬不等高
瀑布流因其視覺特征，多用在以多種比例圖檔/視訊為主體的内容流中，最典型的例子莫過于花瓣、Pinterest，這類圖檔采集網站使用瀑布流可以更有效地利用頁面空間并充分展示圖檔内容而不裁切，同時讓使用者的浏覽體驗更加沉浸，錯落的圖檔也相對更容易形成有效的視覺引導，引導使用者不斷向下浏覽。
以及另外一類以小紅書、淘寶為代表的強内容展示APP，在布局内容時不約而同地使用瀑布流，其核心原因即在于其強視覺引導的特性。
1.列寬的制定邏輯
對于等寬的網格清單來說，我們隻需要去關注它們之間的間距是多少，這樣更友善不同寬度裝置的适配，網格會自動扣除間距并适配網格寬度，而不必設計師一一去定義。
例如，我們隻需定義兩列網格的左右邊距均為20pt，間距12pt。
那麼不管是在12/13/14的390寬度中，還是在ProMax的428寬度中，布局都會固定住這三個數值，并自動适配列寬，列寬的數值具體是多少，并不需要我們關注。
這也正是兩列網格通用的适配邏輯。
2.内容的布局
瀑布流有三種内容布局形式。
一是圖檔等高
在圖檔等高的情況下，能造成網格高度錯落的原因隻有文案。文案的長短不一、是否有标簽等因素，會造成每個網格中的文案部分出現高度差異，進而形成網格錯落。但因為文案通常不會超過兩行，這種高度的內插補點往往是固定且非常有限的，也就是說更容易在下方某些地方回歸對齊。
是以這種布局更容易把控視覺秩序，但會因為強制圖檔等比例導緻内容的不完整，除非限制使用者上傳圖檔的比例。
二是根據圖檔比例自由變化
這是一種完全不限制圖檔比例的形式，網格的高度不僅由圖檔影響，也由文案影響。幾乎不可能做到在下方某處重新對齊，是以視覺上往往更加混亂，偶爾會出現極長或極短的網格，導緻視覺權重出現非意圖的傾向。
三是根據有限圖檔比例變化
這種形式的意思是說，在使用者上傳圖檔時就限制圖檔在有限的幾種比例之内，是以盡管網格高度同樣由圖檔和文案共同影響，但卻将高度內插補點限制在了相對有限的範圍内。現在大多數電商APP采用的便是這種布局形式。
3.内容的類型
瀑布流發展至今，對于内容類型也有許多App根據實際項目需求做出了自己的探索。相較于單一的内容類型，因為内容構成更複雜、需求更多元，更多大型App會偏向選用多類型内容混合的形式摻進瀑布流裡，在達到功能需求的同時，減輕單一性内容對使用者浏覽時的資訊疲勞。
具體來說，内容類型分成兩個大類，主内容和營運内容。
主内容
主内容根據App類型的不同，包括但不限于圖檔、視訊、動态、商品，主内容依然是瀑布流中占比最多的内容類型。在一個頁面内可以使用一種主内容，也可以多種混合。
在多種主内容混合時，設計形式上通常并不會有太大的差別，隻會在同一設計架構下，增改該内容類型特有的資訊。
營運内容
針對App不斷擴大的營運需要，更多App會在瀑布流中插入營運内容。
例如，淘寶會在瀑布流最開始的左上角放置一個小型的輪播元件，左上角則是主推的與拼多多抗衡的百億補貼功能入口。
以及馬蜂窩，在頂部放置一個兩列寬的輪播推薦位。
這些都是很不錯的根據自身需要改造瀑布流的實踐。
1.站酷
站酷的瀑布流會在中途插入一組視覺上差異較大、與主内容類型相幹性也較低的推薦設計師使用者，因為站酷瀑布流内容類型較為單一，這麼做可以用來調節單一内容類型對浏覽造成的視覺壓力。
2.馬蜂窩
馬蜂窩的瀑布流樣式差異化做得相當大，不管是縱向對比(與同頁面其他卡片)還是橫向對比(與其他App瀑布流)，設計都顯得非常大膽前衛，是以馬蜂窩的卡片樣式有比較好的參考性。
3.其他瀑布流樣式
結尾
瀑布流的元件就介紹到這，後續所有有關元件的介紹都會同步更新到我們的知識庫中！大家記得到裡面檢視～
作者:酸梅幹超人
來源:微信公衆号:超人的電話亭
出處:https://mp.weixin.qq.com/s/yIsepfjBKQ_Wpa1335V9tQ