<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.waterfall {
column-count: 3;
column-gap: 10px;
}
.waterfall-item {
break-inside: avoid;
margin-bottom: 10px;
display: block;
}
.waterfall-item img {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="waterfall">
<div class="waterfall-item">
<img src="img1.jpg" alt="" />
</div>
<div class="waterfall-item">
<img src="img2.jpg" alt="" />
</div>
<div class="waterfall-item">
<img src="img3.jpg" alt="" />
</div>
</div>
</body>
</html>
使用 float: left（float常规浮动，高度固定、不铺满）
<style>
.waterfall {
display: block;
margin-right: -10px;
margin-bottom: -10px;
}
.waterfall-item {
float: left;
height: 300px;
margin-right: 10px;
margin-bottom: 10px;
}
.waterfall-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
使用 flex-wrap: wrap（flex常规浮动，高度固定）
<style>
.waterfall {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.waterfall-item {
flex: 1;
height: 300px;
min-width: 200px;
max-width: 500px;
}
.waterfall-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
使用 column-count （列数固定，宽高自适应）
<style>
.waterfall {
column-count: 3;
column-gap: 10px;
}
.waterfall-item {
break-inside: avoid;
margin-bottom: 10px;
display: block;
}
.waterfall-item img {
width: 100%;
height: auto;
display: block;
}
</style>
使用 Grid + grid-auto-flow: dense（列数变化，宽高自适应，每个item宽高相等）
<style>
.waterfall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-gap: 10px;
grid-auto-flow: dense;
}
.waterfall-item {
grid-row: span 1;
overflow: hidden;
border-radius: 8px;
}
.waterfall-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
想要高可控效果可借助 javascrpit 脚本实现，列如：Masonry 、Isotope、Justified-Gallery、Packery、bricks.js 、flexImages、jQuery-flexImages、waterfall