<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 100px;
height: 200px;
background-color: rgb(122, 169, 209);
float: left;
margin-right: 10px;
transition: all 0.3s;
}
#app {
position: relative;
width: 400px;
margin: 100px auto;
min-height: 100vh;
}
@media screen and (min-width:1680px){
#app{
width: 1600px;
}
}
@media screen and (min-width:1200px) and (max-width:1680px){
#app{
width: 1200px;
}
}
@media screen and (max-width:1200px){
#app{
width: 800px;
}
}
</style>
<body>
<div id="app">
<div class="box"></div>
<div class="box" style="height:150px;"></div>
<div class="box"></div>
<div class="box" style="height: 130px;"></div>
<div class="box"></div>
<div class="box" style="height: 90px;"></div>
<div class="box"></div>
<div class="box" style="height: 250px;"></div>
<div class="box"></div>
<div class="box" style="height: 90px;"></div>
<div class="box"></div>
<div class="box" style="height: 250px;"></div>
<div class="box"></div>
<div class="box" style="height:150px;"></div>
<div class="box"></div>
<div class="box" style="height: 130px;"></div>
<div class="box"></div>
<div class="box" style="height: 90px;"></div>
<div class="box"></div>
<div class="box" style="height: 250px;"></div>
<div class="box"></div>
<div class="box" style="height:150px;"></div>
<div class="box"></div>
<div class="box" style="height: 130px;"></div>
<div class="box"></div>
<div class="box" style="height:150px;"></div>
<div class="box"></div>
<div class="box" style="height: 130px;"></div>
<div class="box"></div>
</div>
</body>
<script>
window.onresize = function () {
setSort()
}
window.onload = function (){
setSort()
}
function setSort() {
// 获取所有盒子
let boxs = document.querySelectorAll('.box');
let app = document.querySelector('#app')
let len = app.offsetWidth
let span = 10
//获取一行能放几个盒子的个数
let n = parseInt(len / (boxs[0].offsetWidth + span))
//收集盒子高度的数组
let HAll = []
let minH, index;
for (let i = 0; i < boxs.length; i++) {
if (n > i) {
HAll.push(boxs[i].offsetHeight)
boxs[i].style.position = 'static'
} else {
minH = Math.min.apply(null, HAll) //拿到收集高度数组中的最小高度
index = HAll.indexOf(minH) // 拿到最小高度的索引
boxs[i].style.position = 'absolute'
boxs[i].style.top = minH + span + 'px'
boxs[i].style.left = boxs[index].offsetLeft + 'px'
HAll[index] = minH + boxs[i].offsetHeight + span //修改高度数组中最小的高度
}
}
}
</script>
</html>
标签：minH,app,布局,width,瀑布,let,HAll,boxs From： https://www.cnblogs.com/jzm2842688813/p/17036974.html