瀑布流(Waterfall)排版研究

如果你看過或用過Pinterest這個全球第三大的社交網站，那你一定對瀑布流(WaterFall)排版不陌生，使用這種參差不齊的排版方式來展現源源不絕的產品、圖片是一個非常棒的作法，為什麼呢?

如果你不了解Pinterest，可以參考Inside Harlequin的文章

好處一 : 最大面積的利用螢幕空間 

好處二 : 最大範圍的搜尋

先來解釋何謂最大面積利用，通常waterfall排版都會依照瀏覽器當前大小(window)來作為排版的依據，如果你在22吋螢幕這樣的排版通常可以放置7~8個行，如果螢幕小了點，瀑布流會自動的調整行數，參考下圖說明

在13吋螢幕中，僅可顯示到5行

在23吋寬螢幕中，大約可以顯示大8行

使用這樣的方法，在展示作品/商品時，無非是一個最富經濟效益的方式，不再受螢幕大小的限制來決定展示的數量，相信這也是為什麼Pinsterest火紅的重點之一阿

第二，快速瀏覽，比較下面兩張圖片，何者瀏覽速度較佳

相信你已經找到兩種方式呈現的優缺點了，第一張圖使用格子排版主要是以圖搜尋的方式尋找資料，如果圖片把內容展現的夠清楚，你或許連標題都不用看。而第二張圖片以列表呈現方式，這樣的方式較適合用來呈現文章，主要是以標題搜尋為主。Pinterest上的所呈現的內容為前者，使用圖片為主的搜尋方式。

以下是其他利用瀑布流呈現的網站

花瓣 (http://huaban.com/ )

哇哦! (http://wow.taobao.com/)

拼圖圖 (http://www.pintutu.com/)

發現啦! (http://markzhi.com/)

總結 : 

最近Pinterest非常的紅，許多廠商相繼的模仿學習，想要從中分一杯羹，瀑布流也許是當前最適合使用這樣場合的排版，但是領先者已經遠遠的在前方，要如何追上他們並超越，我想會是另一個方向，也許會是內容行銷吧!

補充說明 : 如果你想實現Pinterest瀑布流排版，你可以參考之前的文章isotope動態排版或是jQuery Masonry Plugin來實現。