前記
又來做標題黨水文章了，前段時間在寫線上便利貼的時候想做瀑布流，在查詢網上的各種方法後，發現要麼是用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，感覺還有很多未知的領域可以去探索，一起加油。