html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
/* 瀑布流容器 */
.waterfall-container {
column-count: 2; /* 列数 */
column-gap: 20px; /* 列间距 */
}
/* 每个瀑布流项 */
.waterfall-item {
display: inline-block;
width: 100%;
margin-bottom: 20px; /* 项之间的垂直间距 */
background-color: #f0f0f0;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="waterfall-container">
<div class="waterfall-item">
项目 1项目 1项目 1项目 1项目 1
</div>
<div class="waterfall-item">
项目 2项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
</div>
<div class="waterfall-item">
项目 3项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
</div>
<div class="waterfall-item">
项目 4项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
</div>
<div class="waterfall-item">
项目 5项目 1项目 1项目 1项目 1项目 1项目 1
</div>
<div class="waterfall-item">
项目 6项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1项目 1
</div>
<!-- 添加更多项目 -->
</div>
</body>
</html>
