将行从中 2021-09-24 17:11 采纳率: 28.6%
浏览 24
已结题

亲们，为了完成瀑布流的滚动加载用了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>
  • 写回答

1条回答 默认 最新

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月21日
  • 创建了问题 9月24日

悬赏问题

  • ¥15 onlyoffice编辑完后立即下载，下载的不是最新编辑的文档
  • ¥15 求caverdock使用教程
  • ¥15 Coze智能助手搭建过程中的问题请教
  • ¥15 12864只亮屏 不显示汉字
  • ¥20 三极管1000倍放大电路
  • ¥15 vscode报错如何解决
  • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
  • ¥15 python随机森林对两个excel表格读取，shap报错
  • ¥15 基于STM32心率血氧监测（OLED显示）相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么
  • ¥100 X轴为分离变量（因子变量），如何控制X轴每个分类变量的长度。