内容
多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示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 = falsewindow.onscroll = function(){var listHeight = list.offsetHeight//绑定var listTop = list.offsetTopvar scrollTop = document.documentElement.scrollTop var windowHeight = document.documentElement.clientHeightif(isLoading) returnif((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50){ //计算滚动距离isLoading = truesetTimeout(function(){ //渲染下一页数据renderHTML(arr)isLoading = false //下一次继续触发到底事件},1000)}}</script>
</body>
</html>
效果
1673530513422
