小黑子的瀑布流布局案例
需求:
1.多个等宽的图片进行穿插排序成六列,并且在目前显示的最后一张图片显示之后,再进行下拉时能够在进行加载其他图片
2. 每次下拉显示20-30张图片。
实现原理:
- 首先在js中编写图片数组arr1,利用for循环对每个图片赋予li
- 在css中利用弹性盒子排列成6列
- 最后在js里利用懒加载,到底时再定时器事件触发,返回arr1设定的函数即可实现下拉
html部分
<!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>
<link rel="stylesheet" href="./瀑布流布局css.css">
<script src="./瀑布流布局js.js"></script>
</head>
<body>
<ul id="list"></ul>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#list{
width: 1400px;
height: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
ul li{
overflow: hidden;
border: 1px solid black;
margin-bottom: 5px;
height: 290px;
}
ul li img{
width: 200px;
}
js部分
window.onload = function () {
let arr1 = [
{
url: "./图片/1.webp"
},
{
url: "./图片/2.jpg"
},
{
url: "./图片/3.webp"
},
{
url: "./图片/4.webp"
},
{
url: "./图片/5.webp"
},
{
url: "./图片/OIP-C (1).jpg"
},
{
url: "./图片/OIP-C (2).jpg"
},
{
url: "./图片/OIP-C (3).jpg"
},
{
url: "./图片/OIP-C.jpg"
},
{
url: "./图片/OIP-C (4).jpg"
},
{
url: "./图片/三鹰朝1.webp"
},
{
url: "./图片/三鹰朝2.jpeg"
},
{
url: "./图片/那由多1.jpg"
},
{
url: "./图片/那由多2.jpg"
},
{
url: "./图片/3.webp"
},
{
url: "./图片/4.webp"
},
{
url: "./图片/5.webp"
},
{
url: "./图片/OIP-C (1).jpg"
},
{
url: "./图片/OIP-C (2).jpg"
},
{
url: "./图片/OIP-C (3).jpg"
},
{
url: "./图片/OIP-C.jpg"
}
]
renderHTML(arr1)//函数声明都是会预读到前面,所以实际调用写在函数声明前
function renderHTML(arr) {
for (let i = 0; i < arr.length; i++) {//在加载数据时不出现闪动
let oli = document.createElement("li")
oli.innerHTML = `<img src="${arr[i].url}" alt="">`
list.appendChild(oli)
}
}
isLoading = false//用于触发到底了停止打印
window.onscroll = function () {
// console.log("111111")
let listHeight = list.offsetHeight
let listTop = list.offsetTop
// console.log(listHeight+listTop)
let scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop
let windowHeight = document.documentElement.clientHeight
if (isLoading) return
if ((listHeight + listTop) - Math.round(windowHeight + scrollTop) < 50)//快到底时触发
{
console.log("到底了")
isLoading = true
//渲染下一个数据
setTimeout(function () {//设置拉到底之后过段实际再加载数据
renderHTML(arr1)
isLoading = false//下一次到底事件再次触发
}, 1000
)
}
}
}
样式:
动态效果:
瀑布流录屏—含玛量超高