一 . 使用css属性：column-count（不好）
column-count 是 CSS 中的一个属性，用于设置元素的内容应该被分割成多少列来显示，轻松地实现多列布局效果。
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.waterfall-container {
column-count: 2; /* 根据需要调整列数 使用这个属性就能实现----------------------------*/
column-gap: 20px; /* 列与列之间的间距 */
width: 90%; /* 容器宽度 */
margin: 20px auto; /* 外边距，使容器居中 */
}
.waterfall-item {
/* 这里可以添加一些基本的样式，如背景色、边框等 */
background-color: #f4f4f4;
margin-bottom: 20px; /* 元素之间的间距 */
break-inside: avoid; /* 防止内容跨列显示，但这不是所有浏览器都支持 */
/* 为了让内容在容器内垂直居中，可以添加以下样式（可选） */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 设置一个固定的高度或最小高度来模拟不同高度的元素（可选） */
/* height: 150px; 或 min-height: 100px; */
}
/* 为了更明显地看到效果，可以给每个元素添加一些随机高度 */
/* 注意：实际项目中，你可能需要通过 JavaScript 来动态设置这些高度 */
.waterfall-item:nth-child(odd) {
height: 200px; /* 奇数项的高度 */
background-color: red;
}
.waterfall-item:nth-child(even) {
height: 150px; /* 偶数项的高度 */
background-color: blue;
}
</style>
<body>
<div class="waterfall-container">
<div class="waterfall-item">内容1</div>
<div class="waterfall-item">内容2</div>
<div class="waterfall-item">内容2</div>
<div class="waterfall-item">内容1</div>
<div class="waterfall-item">内容1</div>
<div class="waterfall-item">内容2</div>
<div class="waterfall-item">内容2</div>
</div>
</body>
</html> 是不是感觉瀑布流没那么难？一个样式就能实现我们要的效果，但是如果换成3列来看呢？
你就会发现他是垂直方向上的排列，只有第一列补充完后，第二列才开始补充，不是我们想要市面上所需要的横向排列瀑布流
js
.waterfall-container {
column-count: 3; /* 根据需要调整列数 使用这个属性就能实现----------------------------*/
column-gap: 20px; /* 列与列之间的间距 */
width: 90%; /* 容器宽度 */
margin: 20px auto; /* 外边距，使容器居中 */
}二 . 使用js定位实现（广泛使用）
先获取父盒子的宽度，试试能塞下多少个小图片，当第一行满了后，接下来就换行，就会获取第一行中最小图片的高度，后再获取它距离左边的宽度，然后才用定位属性，将第二行的图片添加到第一行最小图片高度的下面，具体不好讲，认真看代码就能理解了
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
/* overflow: hidden; */
width: 1000px;
}
.box{
float: left;
padding: 5px;
}
.box-img{
width: 250px;
padding: 5px;
/* border: 1px solid #aaa; */
}
img{
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/ede93cf241ce93df1f824022ce1bc6dd042879819162e-fvCJH6" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/2d14622d76dbcd036cc47f240c80d5f1b9e6481da3430-r5cTIt" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/824306750839c34939b4345039e7425740598dd510a9c1-ewh29L" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/824306750839c34939b4345039e7425740598dd510a9c1-ewh29L" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/ce90e5b734b0c9933335d962a02ae6e8227965b6a984c-Gg1vRz" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/9fa5103953d1b3f2a70984f17395c1cf1eddc8db2af38-Q2fm1x" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="https://gd-hbimg.huaban.com/ce90e5b734b0c9933335d962a02ae6e8227965b6a984c-Gg1vRz" alt="">
</div>
</div>
</body>
<script>
//网页完全加载后执行特定的代码或函数。这意呀着，当网页上的所有内容
//（包括图片、样式表、脚本文件等）都加载完成后，window.onload 事件会被触发
window.onload = function() {
// 确定第一行能放几 n 张图
// 1. 获取屏幕宽度
// 2. 获取图片的宽度
// 操作第 n+1 张 摆放它的位置 放在高度最小的那一列
// 1. 获取每一列的高度
// 2. 更新这一列的高度
imgLocation('container', 'box')
function imgLocation(parent, child) {
var cParent = document.getElementById(parent)
var cChild = cParent.getElementsByClassName(child)
var screenWidth = cParent.offsetWidth
console.log(screenWidth,'父亲的宽度',cChild);
var imgWidth = cChild[0].offsetWidth
var num = Math.floor(screenWidth / imgWidth)
console.log(num);
// cParent.style.width = `${imgWidth * num}px`
// 操作第 num+1 张
var boxHeightArr = []
for (var i = 0; i < cChild.length; i++) {
if (i < num) { // 第一行
boxHeightArr.push(cChild[i].offsetHeight)
} else {
// 找数组最小值
var minHeight = Math.min(...boxHeightArr)
console.log(boxHeightArr,minHeight);
var minIndex = boxHeightArr.indexOf(minHeight)
// 摆放图片
cChild[i].style.position = 'absolute'
cChild[i].style.top = minHeight + 'px'
cChild[i].style.left = cChild[minIndex].offsetLeft + 'px'
// 更新这一列的高度
boxHeightArr[minIndex] = boxHeightArr[minIndex] + cChild[i].offsetHeight
}
}
}
}
</script>
</html>