Web前端入门第 48 问：纯 CSS 使用 column 属性实现瀑布流布局

什么是瀑布流？
看一张图，以下图片来源于花瓣网截图：

如上图所示，瀑布流就是让内容按列显示，自动填充空白。
使用 column 实现瀑布流

源码：

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.   
13.   
14.   
15.   
16.   
17.   
18.   
19.   
20.   
21.   
22.   
23.   
24.   
25.   
26.   
27.   
28.   
29.   
30.   
31.   
32.   
33.   
34.   
35.   
36.   
37.   
38.   
39.   
40.   
41.   
42.   
43.   
44.   
45.   
46.   
47.   
48.   
49.   
50.   
51.   
52.   
53.   
54.   
55.   
56.   

复制代码

效果：
视口宽度大于 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 实现瀑布流

源码：

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.   
13.   
14.   
15.   
16.   
17.   
18.   
19.   
20.   
21.   
22.   
23.   
24.   
25.   
26.   
27.   
28.   
29.   
30.   
31.   
32.   
33.   
34.   
35.   
36.   
37.   
38.   
39.   
40.   
41.   
42.   

复制代码

效果：

写在最后

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！