瀑布流加懒加载

最新推荐文章于 2024-05-19 13:47:41 发布

martinlpy

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量202

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/m0_69045017/article/details/123913105

版权

<!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>
        #list {
            width: 1310px;
            margin: 0 auto;
        }
        .item {
            width: 250px;
            margin: 5px;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <!-- <img id="img" src="https://hbimg.huabanimg.com/77ca18f61163168796b9d4e4a52005f0fbdb0a1860f-pGG6Vg_fw236?236x419" alt="1"> -->
    <div id="list">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    
    <script src="./昨晚作业/homework.js"></script>
    <script>
        // var url = 'https://hbimg.huabanimg.com/77ca18f61163168796b9d4e4a52005f0fbdb0a1860f-pGG6Vg_fw236?236x419';
        // img.style.width = '236px';
        // img.style.height = '419px';

        // console.log(document.body.offsetHeight);

        var items = document.getElementsByClassName('item');

        for (let i = 0; i < data.length; i++) {
            var img = document.createElement('img');
            img.src = './昨晚作业/lazyload.gif';
            img.setAttribute('url', data[i].img_url);
            img.style.width = '100%';
            // 根据比例去设置图片的高度   宽度是250   原始图片的宽高   算出宽度为250的时候的等比例的高度    250 / h   =   w1 / h1    h = 250 * h1 / w1
            var wh = data[i].img_url.split('?')[1].split('x');
            console.log(wh);
            // wh[1]原始图片的高     wh[0]原始图片的宽
            img.style.height = 250 * wh[1] / wh[0] + 'px';

            // 找到最小高度的div
            var min = items[0].offsetHeight;
            var index = 0;
            for (let j = 0; j < items.length; j++) {
                if (min > items[j].offsetHeight) {
                    min = items[j].offsetHeight;
                    index = j;
                }
            }

            console.log(min, items[index]);
            items[index].appendChild(img);
        }


        var imgs = document.getElementsByTagName('img');
        window.onscroll = load;



        function load () {
            for (let i = 0; i < imgs.length; i++) {
                if (imgs[i].offsetTop < document.documentElement.scrollTop + window.innerHeight - 200 && !imgs[i].loaded) {
                    imgs[i].src = imgs[i].getAttribute('url');
                    imgs[i].loaded = true;
                }
            }
        }

        load();
    </script>
</body>
</html>

martinlpy

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流加懒加载

<!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>Do.
复制链接

扫一扫