純CSS實現瀑布流，你會嗎？

前記

又來作標題黨水文章了，前段時間在寫在線便利貼的時候想作瀑布流，在查找網上的各類方法後，發現要麼是用js來實現，要麼就須要對瀑布進行分列包裹，我想找一種最簡單的方法，只須要CSS並且不須要分列就能夠輕鬆實現瀑布流。通過個人仔細查找，終於被我發現了。

神奇的column-count

在MDN上是這樣解釋column-count的：column-countCSS屬性將元素的內容分解爲指定的列數。

如圖所示：

直接盜用MDN上的例子了，很是的清晰明瞭，數值設置幾就會有幾排，另外搭配column-gap使用，（column-gap該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。）效果更好呦。

如圖所示：

防止斷裂的break-inside

只是設置column-count會有一個問題，就是，它會默認讓你的底部保持一行，這就回形成內容斷裂，就像這樣：

只要在它自身上設置break-inside: avoid;就能夠有效的避免內容斷裂，哈哈哈哈，只要向.box-wrapper中添加帶有.box類的標籤就能夠自動實現瀑布流了。

可是缺點呢

說了優勢，固然要說一說缺點了，首先就是來看一看兼容性，如圖所示：

emmm，看起來還好，可是都是淡綠色，再來看看break-inside的

也是一個樣子，大部分是淡綠色，兼容的好像並非特別好。

還有一個缺點就是，你每新加一項，column就會從新佈局，頁面會閃爍跳動一下，體驗不是特別好，想體驗的能夠去看看個人在線便利貼，去體驗一下（建議使用谷歌瀏覽器），哈哈哈哈。

這是個人demo代碼，有興趣的能夠下載來看看，哈哈哈哈。

後記

從完美的角度來講這不是一個合格的瀑布流方式，可是用此來實現瀑布流真的很是的簡單方便，CSS文化博大精深，emmm，感受還有不少未知的領域能夠去探索，一塊兒加油。