亲们，为了完成瀑布流的滚动加载用了getBoundingClientRect()，但是存在兼容性，有没有其他方式？现在iphone11不兼容。用过offset().top，但是有报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
height: auto;
position: relative;
}
.item {
width: 300px;
height: auto;
padding: 10px;
position: absolute;
/* transition: all .5s ease-in-out; */
}
.item .picture {
padding: 10px;
border: 1px solid #eee;
box-shadow: 0 0 5px 5px #eee;
}
.item .picture img {
width: 100%;
}
/* .show{
animation:scale 1s forwards;
}
@keyframes scale {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
} */
</style>
<body>
<h1 style="text-align: center; margin:50px 0;font-weight: 100;"> 瀑布流 </h1>
<div class="add">
<div id="con" class="container">
<div class="item show">
<div class="picture">
<img src="https://t1.chinaums.com/ecology/web-plat/attached/image/27826/20210309/210309114.jpg"
alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://t1.chinaums.com/ecology/web-plat/attached/image/27826/20200901/200901113-ys.jpg"
alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img2.baidu.com/it/u=890828384,276799735&fm=26&fmt=auto" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=3847175601,1752489758&fm=26&fmt=auto" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=199439628,2948484092&fm=26&fmt=auto" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=2482729259,2544321635&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=374"
alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://t1.chinaums.com/ecology/web-plat/attached/image/27826/20210309/210309110.jpg"
alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=3697511908,2290427574&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=3669156690,1947123153&fm=26&fmt=auto" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=400649484,3771683187&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img0.baidu.com/it/u=1380018140,3055082859&fm=26&fmt=auto" alt="">
</div>
</div>
<div class="item show">
<div class="picture">
<img src="https://img1.baidu.com/it/u=3263556668,823617383&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>
</div>
</div>
</div>
<script>
document.onscroll = throttle(function () {
let container = document.getElementById("con");
let item = document.getElementsByClassName("item");
if (item[item.length - 1].getBoundingClientRect().top < window.innerHeight) {
let arr = [
"https://img0.baidu.com/it/u=400649484,3771683187&fm=26&fmt=auto&gp=0.jpg",
"https://img0.baidu.com/it/u=3669156690,1947123153&fm=26&fmt=auto",
"https://img0.baidu.com/it/u=3847175601,1752489758&fm=26&fmt=auto",
"https://img1.baidu.com/it/u=3263556668,823617383&fm=26&fmt=auto&gp=0.jpg"];
for (let i = 0; i < 4; i++) {
container.innerHTML += `
<div class="item show">
<div class="picture">
<img src="${arr[i]}" alt="">
</div>
</div>
`
}
waterFall();
}
}, 100);
function throttle(callback, delay) {
let flag = true;
return function () {
if (flag) {
flag = false;
setTimeout(() => {
callback.bind(this)();
flag = true;
}, delay);
}
}
}
function waterFall() {
let container = document.getElementById("con");
let item = document.getElementsByClassName("item");
let columnCount = 2;
container.style.width = columnCount * item[0].offsetWidth + "px";
// 2. 设置每一个item元素的排列位置
// 第一行整体的top值都是0 后面的一次找上一行高度最小的容器 在它的下面进行排列
let hrr = []; // 存每一行盒子的高度
for (let i = 0; i < item.length; i++) {
if (i < columnCount) {
item[i].style.top = "0px";
item[i].style.left = i * item[0].offsetWidth + "px";
hrr.push(item[i].offsetHeight);
// 第一行
} else {
// 第一行之后的
let min = Math.min(...hrr);
let index = hrr.indexOf(min);
item[i].style.top = min + "px";
item[i].style.left = index * item[0].offsetWidth + "px";
hrr[index] += item[i].offsetHeight;
}
}
}
waterFall()
</script>
</body>
</html>
瀑布流我理解的和图片懒加载的原理有相通之处。
可以参考这篇文章：
修改一下你这部分的代码：判断加载图片的条件
if (item[item.length - 1].getBoundingClientRect().top < window.innerHeight) {
let arr = [
"https://img0.baidu.com/it/u=400649484,3771683187&fm=26&fmt=auto&gp=0.jpg",
"https://img0.baidu.com/it/u=3669156690,1947123153&fm=26&fmt=auto",
"https://img0.baidu.com/it/u=3847175601,1752489758&fm=26&fmt=auto",
"https://img1.baidu.com/it/u=3263556668,823617383&fm=26&fmt=auto&gp=0.jpg"];
for (let i = 0; i < 4; i++) {
container.innerHTML += `
<div class="item show">
<div class="picture">
<img src="${arr[i]}" alt="">
</div>
</div>
`
}
waterFall();
}