多个等宽的图片进行穿插排序成六列,并且在目前显示的最后一张图片显示之后,再进行下拉时能够在进行加载其他图片,每次下拉显示20-30张图片。
<!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>
<style>
.a1{
width: auto;
}
.a2{
width: auto;
}
#box{
column-count: 6;
}
#list img{
width: 100%
}
#list{
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<img class="a1" src="./p12.webp" alt="懒加载1"/>
</ul>
</div>
<script>
var arr3 =[
{
name:"n1",
path:"./p1.webp"
},
{
name:"n2",
path:"./p2.webp"
},
{
name:"n3",
path:"./p3.webp"
},
{
name:"n4",
path:"./p4.webp"
},
{
name:"n5",
path:"./p5.webp"
},
{
name:"n6",
path:"./p6.webp"
},
{
name:"n7",
path:"./p7.webp"
},
{
name:"n8",
path:"./p8.webp"
},
{
name:"n9",
path:"./p9.webp"
},
{
name:"n10",
path:"./p10.webp"
},
{
name:"n11",
path:"./p11.webp"
},
{
name:"n12",
path:"./p12.webp"
},
]
var arr4 =[
{
name:"n1",
path:"./p1.webp"
},
{
name:"n2",
path:"./p2.webp"
},
{
name:"n3",
path:"./p3.webp"
},
{
name:"n4",
path:"./p4.webp"
},
{
name:"n5",
path:"./p5.webp"
},
{
name:"n6",
path:"./p6.webp"
},
{
name:"n7",
path:"./p7.webp"
},
{
name:"n8",
path:"./p8.webp"
},
{
name:"n9",
path:"./p9.webp"
},
{
name:"n10",
path:"./p10.webp"
},
{
name:"n11",
path:"./p11.webp"
},
{
name:"n12",
path:"./p12.webp"
},
]
// var arr =[
// {
// }
// ]
renderHTML(arr3)
function renderHTML( arr) {
list.innerHTML += arr.map(function (item) {
return`<li>
<img src="${item.path}" alt="">
<h3>${item.name}</h3>
</li>`
}).join("")
}
isLoading = false
window.onscroll = function(){
var listHeight = list.offsetHeight
var listTop = list.offsetTop
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var windowHeight = document.documentElement.clientHeight
if((listHeight+listTop)- Math.round(windowHeight+scrollTop)<100){
console.log("到底了")
isLoading = true
setTimeout(function(){
renderHTML ( arr4)
isLoading = false
} , 1000 )
}
}
</script>
</body>
</html>
设置行为6列
先加载一批数据
监测滚动条距离,距离到底时再加载另一组数据
瀑布流懒加载