纯 CSS 使用 column 属性实现瀑布流布局

什么是瀑布流？ 看一张图，以下图片来源于花瓣网截图： 如上图所示，瀑布流就是让内容按列显示，自动填充空白。

使用 column 实现瀑布流

源码：

<div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

效果： 视口宽度大于 1200px 时，显示 5 列： 视口宽度在 600px-800px 之间时，显示 3 列：

column 相关属性

column-count

column-count 声明显示多少列。默认值为 auto，由浏览器自己决定。

column-fill

column-fill 控制元素内容分成列时的平衡方式。有效值：auto（按顺序填充列）、balance（仅最后一页内容平均分配到各列）、balance-all（全部分页内容平均分配到各列）。

column-gap

column-gap 设置列间隔。默认值 normal 表示列间距占用 1em 宽度。

column-rule

column-rule 简写属性，包含 column-rule-width、column-rule-style 和 column-rule-color 。 column-rule-width 设置线条宽度。 column-rule-style 与 border-style 一样，支持值：none 、 hidden 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 、 outset。 column-rule-color 设置线条颜色。

column-span

column-span 设置子元素是否跨列显示。有效值：none（不跨列）、all（跨列）。

column-width

column-width 设置列的宽度。浏览器会自动调整宽度大小，如果设置的宽度连两列都放不下，会自动变为一列显示（如图三）。

columns

columns 简写属性，可组合设置 column-width 和 column-count 属性。

grid 实现瀑布流

源码：

<div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

效果：

写在最后

在多列布局方面 column 属性相比于 flex 和 grid 而言，显得更有优势。 虽说 grid 也能做出瀑布流效果，不过需要指定每个网格单元的占用大小。 column 虽然不用控制每个子项的大小，但它的子元素排列顺序是从上到下排列，并不是从左往右，这种情况如果数据存在分页加载时候，就会出现内容重新排列导致内容闪动。 在瀑布流布局这个需求场景下，CSS 多多少少还是有点弱鸡~~必要时候还是只有祭出 JS 。 其他相关资料： break-* 控制多列布局如何中断换列： https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside