<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
border: 1px solid pink;
}
ul li {
/* margin: 10px; */
flex: 1;
}
ul li img {
width: 200px;
height: 250px;
}
</style>
</head>
<body>
<ul>
</ul>
<script>
//获取父元素
var oul = document.querySelector("ul")
console.log(oul)
//渲染进入
var arr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654919387&t=fbd63beec4151c6fc4561fee962d064d","https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img2.woyaogexing.com/2022/05/10/ed32c147435e4b7eba9423465e0916dd!400x400.jpeg"
]
var str = ""
for (var j = 0; j < 1000; j++) {
for (var i = 0; i < arr.length; i++) {
str += `
<li><img _src=${arr[i]} alt=""></li>
`
}
}
oul.innerHTML = str
var oimg = oul.getElementsByTagName("img")
// console.log(oimg)
display1()
function display1() {
//兼容 获取窗口的高度
var Hwindow = document.documentElement.clientHeight || document.body.clientHeight
//获取页面被卷去的高度
var top = document.documentElement.scrollTop
console.log(top);
for (var i = 0; i < oimg.length; i++) {
//每一张图片距离顶部的距离
if (oimg[i].offsetTop <= Hwindow + top) {
//设置oimg 的元素名 值
// oimg[i].src = oimg[i].getAttribute('_src')
//设置属性 名,值
oimg[i].setAttribute('src', oimg[i].getAttribute('_src'))
}
}
}
// 鼠标滚动 事件
window.onscroll = display1
</script>
</body>
</html>
12-06
1271
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)