内容
多个等宽的图片进行穿插排序成六列,并且在目前显示的最后一张图片显示之后,再进行下拉时能够在进行加载其他图片,每次下拉显示20-30张图片。
原理
不同大小图实现瀑布效果
用if判断轮动距离实现对字标签的增加
代码
<!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>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
ul,li{
list-style:none;
}
#list{
width: 100%;
margin: 0 auto;
flex-direction: row;
column-gap: 5px;
column-count: 6; /* 6列 */
background-color: antiquewhite;
}
#list #list li img{
width: 180px;
display: block;
margin: 0;
padding: 0;
}
#list li{
padding: 10px 0;
}
</style>
</head>
<body>
<div>
<ul id="list">
<li><img src="./imgs/a.jpg" alt=""></li>
<li><img src="./imgs/b.jpg" alt=""></li>
<li><img src="./imgs/c.jpg" alt=""></li>
<li><img src="./imgs/d.jpg" alt=""></li>
<li><img src="./imgs/e.jpg" alt=""></li>
<li><img src="./imgs/f.jpg" alt=""></li>
<li><img src="./imgs/g.jpg" alt=""></li>
<li><img src="./imgs/h.jpg" alt=""></li>
</ul>
</div>
<script>
var arr=[{
url:"./imgs/a.jpg"
},
{
url:"./imgs/b.jpg"
},
{
url:"./imgs/c.jpg"
},
{
url:"./imgs/d.jpg"
},
{
url:"./imgs/e.jpg"
},
{
url:"./imgs/f.jpg"
},
{
url:"./imgs/g.jpg"
},
{
url:"./imgs/h.jpg"
}]
renderHTML(arr)
function renderHTML(arr) {
for(var i=0;i<arr.length;i++){
var list = document.createElement("UL")
var oli = document.createElement("li")
oli.innerHTML = `<img src="${arr[i].url}" alt="">` //让li绑定图片
list.appendChild(oli) //增加子标签
document.getElementById("list").appendChild(list);
}
}
isLoading = false
window.onscroll = function(){
var listHeight = list.offsetHeight//绑定
var listTop = list.offsetTop
var scrollTop = document.documentElement.scrollTop
var windowHeight = document.documentElement.clientHeight
if(isLoading) return
if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50){ //计算滚动距离
isLoading = true
setTimeout(function(){ //渲染下一页数据
renderHTML(arr)
isLoading = false //下一次继续触发到底事件
},1000)
}
}
</script>
</body>
</html>
效果
1673530513422