<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流--从左边到右排列（复制代码可直接运行，图片在本地无法正常加载请替换）</title>
</head>
<body style="padding: 10px">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.water-basic {
position: relative;
}
.item {
position: absolute;
width: 200px;
margin: 5px;
height: auto;
transition: all 1s;
background-color: rgb(227, 227, 227);
}
img{
max-width: 200px;
}
</style>
<div class="water-basic">
<div class="item box1">1
<img src="image/demo.png"/>
</div>
<div class="item box2">2
<img src="image/1.jpg"/>
</div>
<div class="item box1">3
<img src="image/qiyu3-4K-blur.jpg"/>
</div>
<div class="item box4">4
<img src="image/demo.png"/>
</div>
<div class="item box5">5
<img src="image/1.jpg"/>
</div>
<div class="item box3">6
<img src="image/2.jpg"/>
</div>
<div class="item box2">7</div>
<div class="item box1">8
<img src="image/qiyu3-4K-blur.jpg"/>
</div>
<div class="item box1">9</div>
<div class="item box2">10</div>
<div class="item box4">11
<img src="image/qiyu3-4K-blur.jpg"/>
</div>
<div class="item box3">12</div>
<div class="item box1">13</div>
<div class="item box5">14</div>
<div class="item box2">15</div>
<div class="item box1">16</div>
<div class="item box3">17</div>
<div class="item box1">18</div>
<div class="item box2">19</div>
</div>
<script>
var test = (function init() {
// 1、获取所有的盒子 宽度都是固定的
var node = document.querySelectorAll('.item');
// 2、获取第一个盒子的宽度+外边距
var nodeWidth = node[0].offsetWidth + 10;
// 3、这里根据浏览器视口大小进行动态更新展示一排显示的个数
// let _obj = document.querySelector('.water-basic'); // 指定宽度 需要设置water-basic最大宽度
let _obj = document.body; // 整个浏览器视口大小
var colCount = parseInt(_obj.offsetWidth / nodeWidth);
// 4、定义一个数组保存最后一排的高度
var colItemHeight = [];
// 5、默认第一排都是为0
for (var j = 0; j < colCount; j++) {
colItemHeight.push(0);
}
// 6、遍历所有的盒子
node.forEach(function (item) {
// 7、假设第一排第一个为最小的高度
var minHeight = colItemHeight[0];
// 8、保存最小高度盒子的索引值
var index = 0;
// 9、遍历最新高度的数组
colItemHeight.forEach(function (pro, idx) {
// 10、判断最小高度是不是大于当前遍历到的高度
if (minHeight > pro) {
// 11、如果条件成立 将当前最小的高度重新复制给最小高度变量
minHeight = pro;
// 12、同时更新当前最小高度盒子的索引
index = idx;
}
})
// 13、获取到最小高度的盒子后 开始设置盒子的定位
item.style.top = minHeight + 'px';
item.style.left = (nodeWidth * index) + 'px';
// 14、动态更新当前遍历的盒子的高度+外边距+最小盒子的高度
colItemHeight[index] = (item.offsetHeight + 10) + colItemHeight[index];
})
return {init}
})()
document.body.onresize = function () {
test.init();
}
</script>
</body>
</html>
原文链接：https://blog.csdn.net/weixin_41535944/article/details/119543848
标签：index,盒子,完美,从左到右,高度,colItemHeight,item,瀑布,var From： https://www.cnblogs.com/LindaBlog/p/17305796.html