web 简单瀑布流布局实现
<!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>
<body>
<div id="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
</body>
<style lang="">
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
background-color: lightgray;
}
body::-webkit-scrollbar {
width: 4px;
height: 1px;
}
body::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #E0E0E0;
}
body::-webkit-scrollbar-track {
border-radius: 10px;
background: #FFF;
}
#wrap {
width: 100%;
height: calc(100vh - 20px);
/* 父元素设置相对定位 */
position: relative;
}
#wrap div {
width: calc(100% / 3 - 20px / 3);
background-color: #FFF;
border-radius: 8px;
/* 子元素设置绝对定位 */
position: absolute;
/* 初始的左、上边距都设置为0 */
left: 0;
top: 0;
font-size: 40px;
font-weight: bold;
text-align: center;
}
#wrap div img {
width: 100%;
border-radius: 8px 8px 0 0;
vertical-align: bottom
}
#wrap div p {
font-size: 24px;
}
.item1 {
height: 200px;
}
.item2 {
height: 250px;
}
.item3 {
height: 150px;
}
.item5,
.item7 {
height: 200px;
}
.item4,
.item10 {
height: 150px;
}
.item6 {
height: 240px;
}
.item9 {
height: 200px;
}
.item8 {
height: 250px;
}
</style>
// 通过CDN引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let divList = $('#wrap div') // 获取到需要布局显示的div容器
divList = Array.from(divList) // 通过Array的from()方法将伪数组转化为真正的数组
// let arrH = [] // 用来存储每个div容器的高度
let newTime = 0;
(fn)()
// window.onland=function(){
// fn
// }
function fn () {
var timeNow = Date.now()
if (timeNow - newTime > 300) {
let divW = divList[0].clientWidth // 获取一个div容器的宽度
newTime = timeNow
let arrH = [] // 用来存储每个div容器的高度
let data = window.innerWidth
let cols = Math.floor(data / divW) // 计算一行能够放几个div容器
console.log('cols', cols);
// 循环div容器的数组
divList.forEach((item, index) => {
// 1. 对下标小于一行个数的div容器进行操作
if (index < cols) {
arrH.push(item.clientHeight) // 将div容器的高度放入数组中
item.style.left = index * divW + index * 10 + 'px' // 同时设置每个容器的left值，第一行top都为0
}
})
// console.log('arrH',arrH);
// 2. 对剩余的div容器进行循环
for (let i = cols; i < divList.length; i++) {
let minH = Math.min.apply(Math, arrH) // 获取到数组中最小的高度
idx_min = arrH.indexOf(minH) // 查找到最小高度的下标
divList[i].style.left = divList[idx_min].style.left // 让当前的div容器和最小下标的left值相同
divList[i].style.top = minH + 10 + 'px' // top值在原来的最小高度上+10（为了是容器之间有一个间隙，可随意写）
// 最小列的高度 = 当前自己的高度 + 新容器的高度 + 间隙
arrH[idx_min] = minH + divList[i].clientHeight + 10
}
} else {
return;
}
}
window.addEventListener('resize', function resize () {
fn()
})
</script>
</html>
