簡介

如果你經(jīng)常網(wǎng)上沖浪，這樣參差不齊的多欄布局，是不是很眼熟��？

類似的布局，似乎一夜之間出現(xiàn)在國內(nèi)外大大小小的網(wǎng)站上，比如 Pinterest （貌似是最早使用這種布局的網(wǎng)站了），Mark之，蘑菇街，點(diǎn)點(diǎn)網(wǎng)，以及淘寶最新上線的“哇哦” 等等，倒是很流行哈~ 在淘寶即將上線的眾多產(chǎn)品中，你還會大量看到這樣的形式呢。

這種布局適合于小數(shù)據(jù)塊，每個(gè)數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。所以，我們給這樣的布局起了一個(gè)形象的名字 — 瀑布流式布局。

幾種實(shí)現(xiàn)方式

隨著越來越多設(shè)計(jì)師愛用這種布局，我們作為前端，要盡可能滿足視覺/交互設(shè)計(jì)師的需求。所以，我們整理了下這種布局的幾種實(shí)現(xiàn)方式，有三種：

1）傳統(tǒng)多列浮動。即 蘑菇街和哇哦 采用的方式，如下圖所示：

各列固定寬度，并且左浮動；

一列中的數(shù)據(jù)塊為一組，列中的每個(gè)數(shù)據(jù)塊依次排列即可；

更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列上；

線上例子。

優(yōu)點(diǎn)：

布局簡單，應(yīng)該說沒啥特別的難點(diǎn)；

不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。

缺點(diǎn)：

列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；

滾動加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。

標(biāo)簽： 前端設(shè)計(jì) 交互設(shè)計(jì) 瀑布流式布局 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。