用純 CSS 排出瀑布流 UI

瀑布流

以往用瀑布流習慣用 plugin,最近因為專案需求發現要用原本的 plugin 的話會造成很多不必要的瀏覽器負擔,於是就改用純 CSS 來寫,其實只要用 CSS3 的 column 就可以了,簡單的說就是可以指定一個 DOM 裡面要分割成幾欄,就會自動幫你排列,以前要排這種版面很麻煩的,有了這個後就變得很簡單了,有興趣可以看一下說明文件

所以使用 column 只要依照以前排瀑布流類似的結構,但只要指定要分割成幾欄,就會自動產生瀑布流的 UI 了,還可以寫 RWD 在不同的解析度改變欄位數,有興趣可以試試看。

留言