在CSS3中，我们可以使用列属性(CSS3 Columns)来实现瀑布流布局。
以下是一个实例，它定义了四列布局，并通过column-gap设置了列之间的间距。
<html>
<head>
<style>
.container {
/*定义了四列布局*/
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/*设置列之间的间距*/
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.item {
width: 100%; /*每个单元格宽度为100%，让单元格自动适应列宽*/
margin-bottom: 20px; /*每个单元格底部边距，创建垂直间隔*/
background: #ccc; /*单元格背景色，只是为了看清楚效果*/
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<!-- 更多的内容... -->
</div>
</body>
</html>以上示例中，我们在.container中通过column-count属性设置了4个列，并通过column-gap设置了列间距。
然后在.item里，我们通过width:100%来让每个图片自动适应列的宽度，margin-bottom:20px来设置每一个元素的底部间距，添加了背景色，并且使用了break-inside属性来防止元素内部的内容被分层。
这是一种最简单也很流行的使用CSS3实现瀑布流布局的方法。但需要注意的是，由于这种方法依赖于CSS3的列属性(CSS3 Columns)，在一些老版本的浏览器中可能不能正常工作。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/173172.html
