|
簡介
如果你經(jīng)常網(wǎng)上沖浪，這樣參差不齊的多欄布局，是不是很眼熟��？
類似的布局，似乎一夜之間出現(xiàn)在國內外大大小小的網(wǎng)站上，比如 Pinterest (貌似是最早使用這種布局的網(wǎng)站了)，Mark之，蘑菇街，點點網(wǎng)，以及淘寶最新上線的“哇哦” 等等，倒是很流行哈~ 在淘寶即將上線的眾多產品中，你還會大量看到這樣的形式呢。
這種布局適合于小數(shù)據(jù)塊，每個數(shù)據(jù)塊內容相近且沒有側重。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部。所以，我們給這樣的布局起了一個形象的名字 — 瀑布流式布局。
幾種實現(xiàn)方式
隨著越來越多設計師愛用這種布局，我們作為前端，要盡可能滿足視覺/交互設計師的需求。所以，我們整理了下這種布局的幾種實現(xiàn)方式，有三種:
1) 傳統(tǒng)多列浮動。即 蘑菇街和哇哦 采用的方式，如下圖所示:
- 各列固定寬度，并且左浮動；
- 一列中的數(shù)據(jù)塊為一組，列中的每個數(shù)據(jù)塊依次排列即可；
- 更多數(shù)據(jù)加載時，需要分別插入到不同的列上；
- 線上例子。
優(yōu)點:
- 布局簡單，應該說沒啥特別的難點；
- 不用明確知道數(shù)據(jù)塊高度，當數(shù)據(jù)塊中有圖片時，就不需要指定圖片高度。
缺點:
- 列數(shù)固定，擴展不易，當瀏覽器窗口大小變化時，只能固定的x列，如果要添加一列，很難調整數(shù)據(jù)塊的排列；
- 滾動加載更多數(shù)據(jù)時，還要指定插入到第幾列中，還是不方便。
出處：taobaoued
責任編輯：bluehearts
上一頁 下一頁 瀑布流布局淺析 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 瀑布流布局淺析 [1]
第 2 頁 
