题二：瀑布流布局
要求： 多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张 图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉 显示20-30张图片。
<!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>
*{
margin: 0;
padding: 0;
}
.body{
height: 2000px;
width: 100%;
display: flex;
flex-flow: column wrap;
columns: 6 10px;
overflow: hidden;
}
.body div{
height: 50px;
width: 15%;
margin-bottom: 5px;
break-inside: avoid;
margin-right: 10px;
}
.body img{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="body">
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
<div><img src="./图片/2.jpg" alt=""></div>
</div>
<script>
const body = document.querySelector('.body')
const m = document.querySelectorAll('.body div')
let n = 1
for(let i=0;i<=m.length;i++){
m[i].style.height = (Math.random()*200+100)+'px'
}
window.addEventListener('scroll',function(){
h = document.documentElement.scrollTop
if(h>=n*2000){
body.style.height = ((n+1)*2000+'px')
n++
}
})
</script>
</body>
</html>
屏幕录制 2025-02-16 064843
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
