瀑布流佈局
瀑布流佈局是一個比較常見的一種佈局
這種看起來參差不齊的多欄佈局，重點在於每個元素等寬不等高，一般圖片網站應用較多
隨著頁面滾動，數據塊會在每列底部不斷加載，理論上可以無限加載，且不會頁面美觀
Pinterest、花瓣網都是比較成熟的採用瀑布流佈局的網站
效果圖：
效果圖
PS：這篇只有佈局相關的內容。如需滾動加載，只要在 window.onscroll 中追加數據塊的 dom 元素就可以了
一、經典套路： JavaScript + 絕對定位
HTML 結構：
HTML 結構
整個瀑布流區域用一個
瀑布流中的每個數據塊用 .box 作為基本佈局， .wrapper 呈現樣式和實際內容
CSS 樣式：
在 .box 中設置了 padding 是為了留出視覺上的間距
之所以不使用 margin，是因為後面會使用 js 獲取元素的 offsetWidth 和 offsetHeight
而這兩個屬性值是不計算 margin 的
JavaScript：
js
這種方案一開始給 .box 設置了 position: absolute;
所以在打開頁面的時候，如果頁面性能較差，可能會出現所有數據塊堆疊在一起的情況
可以將 .box 的 position: absolute 替換為 float: left，然後在 js 添加定位樣式的時候，再補上 position: absolute，視覺上會有所改觀
二、純 CSS3 實現瀑布流
CSS3 中新增了一個屬性 column，可以通過規定列數 column-count，讓瀏覽器自適應佈局
只需要刪除上面的 JavaScript 部分，然後修改 #main 和 .box：
刪除上面的 JavaScript 部分，然後修改 #main 和 .box
但通過這種方式實現的瀑布流，實際上是按照縱向排列的，而之前的經典方案是按照橫向排列的
作為一個 CSS3 的新屬性，只有 IE10 及以上的瀏覽器才支持 column哦!
閱讀更多 前端學習指南 的文章
