1. 首页
  2. 文章中心
  3. CSS3

纯CSS3怎么创建瀑布流布局？columns方法浅析

148 阅读 0 评论
我是靠谱客的博主 听话手机，这篇文章主要介绍纯CSS3怎么创建瀑布流布局？columns方法浅析，现在分享给大家，希望可以做个参考。

在之前的文章《CSS3怎么给背景图片添加动态变色效果》中，我们介绍了创建变色背景图像动画的方法，让网页显得高级感十足！这次我们来聊聊使用CSS3 column系列属性怎么实现瀑布流布局，感兴趣的朋友可以去了解一下~

我们提到CSS响应布局的，就会想要使用Grid和Flexbox来实现，其实它们也有一些局限性。像瀑布流布局这种，就无法用它们来简单实现。

这其中的原因就是瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。

那么如何使用纯CSS3实现瀑布流布局呢？我们可以利用CSS3 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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body,
			html {
				position: relative;
				width: 100%;
				height: 100%;
				background: #4f000b;
				font-family: "PT Mono", monospace;
			}

			.masonry {
				-moz-column-count: 1; 
				column-count: 1;   /* 设置列数 */
				-moz-column-gap: 0;
				column-gap: 0;  /* 设置列间距 */
				counter-reset: item-counter;
			}
			
			/* 根据不同的屏幕宽度 设置不同的列数*/
			@media screen and (min-width: 400px) {
				.masonry {
					-moz-column-count: 2;  
					column-count: 2;
				}
			}

			@media screen and (min-width: 600px) {
				.masonry {
					-moz-column-count: 3;
					column-count: 3;
				}
			}

			@media screen and (min-width: 800px) {
				.masonry {
					-moz-column-count: 4;
					column-count: 4;
				}
			}

			@media screen and (min-width: 1100px) {
				.masonry {
					-moz-column-count: 5;
					column-count: 5;
				}
			}

			.item {
				box-sizing: border-box;
				-moz-column-break-inside: avoid;
				break-inside: avoid;
				padding: 10px;
				counter-increment: item-counter;
			}

			.item__content {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 220px;
				font-size: 40px;
				color: #360007;
				background: currentColor;
				box-sizing: border-box;
				color: #720026;
			}

			.item__content:hover {
				background: #9b0034;
			}

			.item__content:before {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 13px;
				width: 2em;
				height: 2em;
				line-height: 2em;
				text-align: center;
				font-weight: bold;
				background-color: #222;
				content: counter(item-counter);
			}

			.item__content--small {
				color: #ce4257;
				height: 100px;
			}

			.item__content--small:hover {
				background: #d66274;
			}

			.item__content--medium {
				color: #ffc093;
				height: 175px;
			}

			.item__content--medium:hover {
				background: #ffd8bc;
			}


			.item__content--large {
				color: #ff7f51;
				height: 280px;
			}

			.item__content--large:hover {
				background: #ff9d7a;
			}
		</style>
	</head>

	<body>
		<div class="masonry">
			<div class="item">
				<div class="item__content">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
				</div>
			</div>
			<div class="item">
				<div class="item__content">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
			<div class="item">
				<div class="item__content">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
				</div>
			</div>
			<div class="item">
				<div class="item__content">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
				</div>
			</div>
			<div class="item">
				<div class="item__content">
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
				</div>
			</div>
		</div>
	</body>
</html>
登录后复制

效果如下图所示：

1.png

ok，瀑布流布局实现了！那么下面分析一下上述代码，给大家介绍几个关键的css属性：

  • @media 查询：可以针对不同的屏幕尺寸设置不同的样式

复制代码
1
2
3
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
登录后复制

  • column-count属性：指定某个元素应分为的列数。

  • column-gap 属性：指定列间距。

复制代码
1
2
3
column-gap: length|normal;
length    一个指定的长度，将设置列之间的差距    
normal    指定一个列之间的普通差距。 W3C建议1EM值
登录后复制

  • break-inside属性：描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

    上例中：

复制代码
1
.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }
登录后复制

break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

  • counter-increment属性：递增一个或多个计数器值，通常用于counter-reset属性和content属性。例如上例中：

复制代码
1
2
3
4
5
6
7
.item {
counter-increment: item-counter;
}

.item__content:before {
content: counter(item-counter);
}
登录后复制

靠谱客平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！

以上就是纯CSS3怎么创建瀑布流布局？columns方法浅析的详细内容，更多请关注靠谱客其它相关文章！

最后

以上就是听话手机最近收集整理的关于纯CSS3怎么创建瀑布流布局？columns方法浅析的全部内容，更多相关纯CSS3怎么创建瀑布流布局内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(98)

相关文章

手把手教你怎么使用css3给文字添加动画效果（附代码）
手把手教你怎么使用css3给文字添加动画效果（附代码）
利用CSS3创建实用的加载动画效果（两种）
利用CSS3创建实用的加载动画效果（两种）
CSS3怎么给背景图片添加动态变色效果
CSS3怎么给背景图片添加动态变色效果
教你用CSS绘制一个带有渐变边框的圆！
教你用CSS绘制一个带有渐变边框的圆！
纯CSS3怎么创建瀑布流布局？columns方法浅析
纯CSS3怎么创建瀑布流布局？columns方法浅析
超实用！利用CSS3将两个图片叠加在一起显示
超实用！利用CSS3将两个图片叠加在一起显示
手把手教你使用css制作一个简单的心跳效果（代码详解）
手把手教你使用css制作一个简单的心跳效果（代码详解）
如何使用CSS动态调整旋转半径？
如何使用CSS动态调整旋转半径？

评论列表共有 0 条评论

立即
投稿
返回
顶部