html瀑布流元素布局宽度,CSS3实现瀑布流布局(display: flex/column-count/display: grid)

前言

在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。

回顾以前(js瀑布流)

基于waterfall.js(11.8kb),还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。

但是，有了css3，再简洁的js，都比不过简单的css代码。

关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放

不熟悉pug模板(jade)的，可以先去了解一下。其实看大致也就懂了，就是循环多个元素，没有复杂的逻辑。

预览：

关键点，

column-count: 元素内容将被划分的最佳列数

break-inside: 避免在元素内部插入分页符

column-count 看起来比display: flex更科学，模板不需要2层循环，更简洁明了。如果真正用到数据上面，会更好处理。

预览：

关键点，

使用 grid-template-columns、grid-template-rows 分割行列

使用 grid-row 控制每个 item 的所占格子的大小

样式

display: grid样式上面感觉也不好用，需要书写很多grid-column、grid-row。

预览：

总结

通过，这3种CSS瀑布流布局，你更喜欢哪一种呢？

个人更喜欢column-count，看起来更加清晰，容易理解，代码量也很少。