一 . 使用css属性：column-count（不好）
column-count 是 CSS 中的一个属性，用于设置元素的内容应该被分割成多少列来显示，轻松地实现多列布局效果。
<!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列来看呢？
你就会发现他是垂直方向上的排列，只有第一列补充完后，第二列才开始补充，不是我们想要市面上所需要的横向排列瀑布流。
.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>
