纯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，感受还有不少未知的领域能够去探索，一块儿加油。