瀑布流布局是网页中常见的布局效果，一般我们都是用JS实现的，其实用CSS 3.0的属性也可以实现这个功能，并且还自带了响应式功能，效果如下 ：
以下是代码实现，欢迎大家复制粘贴和收藏。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0实现瀑布流布局</title>
<style>
h1{
text-align: center;
}
.columns {
/* 设置或检索对象每列的宽度 */
column-width: 320px;
/* 设置或检索对象的列与列之间的间隙 */
column-gap: 15px;
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
.columns div {
display: inline-block;
/* box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); */
/* 避免在元素内部断行并产生新列 */
-webkit-column-break-inside: avoid;
border-radius: 8px;
}
.columns div img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>瀑布流布局</h1>
<div class="columns">
<div>
<img src="https://source.unsplash.com/random?city"/>
</div>
<div>
<img src="https://source.unsplash.com/random?night"/>
</div>
<div>
<img src="https://source.unsplash.com/random?developer"/>
</div>
<div>
<img src="https://source.unsplash.com/random?building"/>
</div>
<div>
<img src="https://source.unsplash.com/random?water"/>
</div>
<div>
<img src="https://source.unsplash.com/random?coding"/>
</div>
<div>
<img src="https://source.unsplash.com/random?stars"/>
</div>
<div>
<img src="https://source.unsplash.com/random?forest"/>
</div>
<div>
<img src="https://source.unsplash.com/random?girls"/>
</div>
<div>
<img src="https://source.unsplash.com/random?working"/>
</div>
</div>
</body>
</html>
