Definition

瀑布流布局,在視覺上表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動條向下滾動,新數(shù)據(jù)不斷被加載進(jìn)來。

瀑布流對于圖片的展現(xiàn),是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶鼠標(biāo)點(diǎn)擊的翻頁操作。

瀑布流的主要特性便是錯落有致,于亂中見序,定寬而不定高的設(shè)計(jì)讓頁面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞,同時給人以不拘一格的感覺,切中年輕一族的個性化心理。

最早采用此布局的網(wǎng)站是Pinterest,逐漸在國內(nèi)流行開來。

目前主流的布局方式是以下三種:

  1. 傳統(tǒng)的多列浮動:如wap端天貓的搜索結(jié)果頁就是左右兩列浮動布局

  2. 通過絕對定位的方式:如Pinterest。

  3. 使用css3實(shí)現(xiàn)。

本文重點(diǎn)討論的是第三種。

Origin

我組負(fù)責(zé)的搜索結(jié)果頁布局是傳統(tǒng)的格子布局,通過 

網(wǎng)友評論