特點
1、琳琅滿目:整版以圖片為主,大小不一的圖片按照一定的規律排列。
2、唯美:圖片的風格以唯美的圖片為主。
3、操作簡單:在浏覽網站的時候隻需要輕輕滑動一下鼠标滾輪,一切的美妙的圖片精彩便可呈現在你面前。
應用
瀑布流對于圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間内獲得更多的信息量,而瀑布流裡懶加載模式又避免了用戶鼠标點擊的翻頁操作,瀑布流的主要特性便是錯落有緻,定寬而不定高的設計讓頁面區别于傳統的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞,同時給人以不拘一格的感覺,切中年輕一族的個性化心理。國内類Pinterest網站也如雨後春筍般出現,目前已知網站超40家。花瓣網CEO劉平陽對騰訊科技表示,類Pinterest網站有三種,一是電商導購,如蘑菇街和美麗說,碰到瀑布流後爆出火花;二是興趣圖譜,如花瓣;三是不是前兩者,但借用瀑布流展現形式,來做自己的事,如幾分鐘網,零食控等。
優缺點
布局優點
有效的降低了界面複雜度,節省了空間:我們不再需要臃腫複雜的頁碼導航鍊接或按鈕了。
對觸屏設備來說,交互方式更符合直覺:在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣,而且所需要的操作精準程度遠遠低于點擊鍊接或按鈕。
更高的參與度:以上兩點所帶來的交互便捷性可以使用戶将注意力更多的集中在内容而不是操作上,從而讓他們更樂于沉浸在探索與浏覽當中。
布局缺點
1.有限的用例:
無限滾動的方式隻适用于某些特定類型産品當中一部分特定類型的内容。例如,在電商網站當中,用戶時常需要在商品列表與詳情頁面之間切換,這種情況下,傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準确的回到某個特定的列表頁面當中。
2.額外的複雜度:
那些用來打造無限滾動的JS庫雖然都自稱很容易使用,但你總會需要在自己的産品中進行不同程度的定制化處理,以滿足你們自己的需求;另外這些JS庫在浏覽器和設備兼容性等方面的表現也參差不齊,你必須做好充分的測試與調整工作。
3.再見了,頁腳:
如果使用了比較典型的無限滾動加載模式,這就意味着你可以和頁腳說拜拜了。最好考慮一下頁腳對于你的網站,特别是用戶的重要性;如果其中确實有比較重要的内容或鍊接,那麼最好換一種更傳統和穩妥的方式。千萬不要耍弄你的用戶,當他們一次次的浏覽到頁面底部,看到頁腳,卻因為自動加載的内容突然出現而無論如何都無法點擊頁腳中的鍊接時,他們會變的越發憤怒。
5.SEO:
集中在一頁當中動态加載數據,與一頁一頁的輸出相比,究竟那種方式更利于SEO,這是你必須考慮的問題。對于某些以類型網站來說,在這方面進行冒險是很不劃算的。
6.關于頁面數量的印象:
其實站在用戶的角度來看,這一點并非負面;不過,如果對于你的網站來說,通過更多的内容頁面展示更多的相關信息(包括廣告)是很重要的策略,那麼單頁無限滾動的方式對你并不适用。
常見網站
鼻祖:Pinterest
通用類:豆瓣市集,花瓣網,我喜歡,讀圖知天下
美女圖片:圖麗網
時尚資訊類:看潮網
時尚購物類:蘑菇街,美麗說,人人逛街,卡當網
品牌推廣類:凡客達人
家居o2o類:新巢網小貓家
微博社交類:都愛看
搞笑圖片類:道趣兒
藝術收藏類:微藝術
潮流圖文分享:荷都分享網
實現方式編輯.
1、傳統多列浮動。代表網站蘑菇街和哇哦。
2、用CSS3實現。
3、絕對定位。代表網站Pinterest。
4、或者用圖片延遲加載。