Definition
瀑布流布局,在視覺(jué)上表現(xiàn)為參差不齊的多欄布局,隨著頁(yè)面滾動(dòng)條向下滾動(dòng),新數(shù)據(jù)不斷被加載進(jìn)來(lái)。 瀑布流對(duì)于圖片的展現(xiàn),是高效而具有吸引力的,用戶(hù)一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶(hù)鼠標(biāo)點(diǎn)擊的翻頁(yè)操作。 瀑布流的主要特性便是錯(cuò)落有致,于亂中見(jiàn)序,定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式,巧妙的利用視覺(jué)層級(jí),視線(xiàn)的任意流動(dòng)又緩解了視覺(jué)疲勞,同時(shí)給人以不拘一格的感覺(jué),切中年輕一族的個(gè)性化心理。
最早采用此布局的網(wǎng)站是Pinterest,逐漸在國(guó)內(nèi)流行開(kāi)來(lái)。
目前主流的布局方式是以下三種:
傳統(tǒng)的多列浮動(dòng):如wap端天貓的搜索結(jié)果頁(yè)就是左右兩列浮動(dòng)布局
通過(guò)絕對(duì)定位的方式:如Pinterest。
使用css3實(shí)現(xiàn)。
本文重點(diǎn)討論的是第三種。
Origin
我組負(fù)責(zé)的搜索結(jié)果頁(yè)布局是傳統(tǒng)的格子布局,通過(guò)
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式