Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章 https://0x9.me/KMrv3

multi-column多列布局实现瀑布流

先简单的讲下multi-column相关的部分属性

  • column-count设置列数
  • column-gap设置列与列之间的间距
  • column-width设置每列的宽度

还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断

1
2
3
4
5
6
break-inside属性值
auto 指定既不强制也不禁止元素内的页/列中断。
avoid 指定避免元素内的分页符。
avoid-page 指定避免元素内的分页符。
avoid-column 指定避免元素内的列中断。
avoid-region 指定避免元素内的区域中断。

column属性介绍

1.columns:<’ column-width ‘> || <’ column-count ‘>

设置或检索对象的列数和每列的宽度。复合属性

1
2
3
4
5
6
7
8
9
/*列数及列宽固定*/
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/*列宽固定,根据容器宽度液态分布列数*/
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;

2.column-width:<’ length ‘> | auto

设置或检索对象每列的宽度;
auto:根据 <’ column-count ‘> 自定分配宽度

1
2
3
4
/*列宽固定,根据容器宽度液态分布列数*/
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;

3.column-count:<’ integer ‘> | auto

设置或检索对象的列数;
auto:根据 <’ column-width ‘> 自定分配宽度

1
2
3
4
/*列数固定,根据容器宽度液态分布列宽*/
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;

4.column-gap:<’ length ‘> | normal

设置或检索对象的列与列之间的间隙

1
2
3
4
5
6
7
8
9
/*固定列间隙为40px*/
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

/*列间隙column-gap:normal;font-size为14px时,列间隙column-gap:normal的计算值也为14px*/
-moz-column-gap:normal;
-webkit-column-gap:normal;
column-gap:normal;

5.column-rule:<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color ‘>

设置或检索对象的列与列之间的边框。复合属性

1
2
3
4
/*在列与列之间设置绿色间隔线*/
-moz-column-rule:10px solid #090;
-webkit-column-rule:10px solid #090;
column-rule:10px solid #090;

6.column-rule-width:<’ length ‘> | thin | medium | thick

medium:定义默认厚度的边框;
thin:定义比默认厚度细的边框;
thick:定义比默认厚度粗的边框

7.column-fill:auto | balance

设置或检索对象所有列的高度是否统一;
auto: 列高度自适应内容;
balance: 所有列的高度以其中最高的一列统一

8.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

设置或检索对象之前是否断行;
auto: 既不强迫也不禁止在元素之前断行并产生新列;
always: 总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列

9.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

设置或检索对象之后是否断行

10.column-break-inside:auto | avoid | avoid-page | avoid-column

设置或检索对象内部是否断行;
auto:既不强迫也不禁止在元素内部断行并产生新列;
avoid:避免在元素内部断行并产生新列

演示代码

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯css实现瀑布流(multi-column多列及flex布局)</title>
<style>
body {
background: #e5e5e5;
}

#root {
margin: 0 auto;
width: 1200px;
column-count: 4;// 设置显示4列
column-width: 240px;
column-gap: 20px;//设置或检索对象的列与列之间的间隙为20px
}

.item {
margin-bottom: 10px;
/* 防止多列布局,分页媒体和多区域上下文中的意外中断 */
break-inside: avoid;
background: #fff;
}

.item:hover {
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}

.itemImg {
width: 100%;
vertical-align: middle;
}

.userInfo {
padding: 5px 10px;
}

.avatar {
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}

.username {
margin-left: 5px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
</style>
</head>

<body>
<div id="root">
<div class="item">
<img src="./img/1.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
<div class="item">
<img src="./img/2.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
<div class="item">
<img src="./img/3.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
<div class="item">
<img src="./img/4.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
<div class="item">
<img src="./img/5.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
<div class="item">
<img src="./img/6.jpg" alt="" class="itemImg">
<div class="userInfo">
<img src="./img/avatar.jpg" alt="" class="avatar">
<span class="username">景甜大小姐</span>
</div>
</div>
</div>
</body>

</html>

预览效果

景甜