前言
like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it
起由
最近,在搭建個人博客時，其中的Demo展示頁面想用瀑布流形式展現(xiàn)，發(fā)現(xiàn)現(xiàn)有的js插件大多基于JQ的，而我稍微有點小強迫，不想基于JQ，于是就著手自己封裝了一個。順帶就研究了下css3方式實現(xiàn)瀑布流，于是總結了下，寫了幾個示例demo，就有了本文。
幾種常用的瀑布流介紹
一般瀑布流的實現(xiàn)常見有三種方式
- 傳統(tǒng)的多列浮動
- css3樣式定義
- js計算絕對布局
傳統(tǒng)的多列浮動簡介
首先固定屏幕中展示的列數(shù)，每一列中間的數(shù)據(jù)作為一組單獨計算，插入數(shù)據(jù)時分別插入不同列中
優(yōu)點:
- 布局最為簡單,一般只依賴與一個浮動布局
- 不需要知道內容的高度，所以當有圖片未加載時也不影
