js实现滚动条下拉加载图片功能

很困的程序媛

已于 2022-12-29 14:47:42 修改

阅读量660

点赞数

文章标签： javascript

于 2022-04-06 00:03:25 首次发布

本文链接：https://blog.csdn.net/m0_67372185/article/details/123980523

版权

这段代码展示了如何使用JavaScript实现网页滚动时动态加载图片。当用户滚动到页面底部时，会加载更多图片，每批加载20张，直至达到最大加载次数10次。随机选择图片文件名从给定数组中，创建并插入新的图片元素到页面上。

摘要由CSDN通过智能技术生成

  <style>
          *{
              margin: 0;
              padding: 0;
          }

          img{
              vertical-align: top;
              height: 200px;
              border-radius: 15px;
              width: 100%;
              object-fit: cover;
          }
          #container{
              width: 100%;
              display: flex;
              flex-wrap: wrap;
          }
          .item{
              margin: 10px;
              border-radius: 15px;
              flex-grow: 1;
          }
          #container::after{
              content: "";
              flex-grow: 999999999;
          }
    </style>
</head>
<body>
    <div id="container">
         <div class="item">
             <img src="imgs/1.webp" alt="">
         </div>
         <div class="item">
            <img src="imgs/2.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/3.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/4.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/5.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/6.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/7.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/8.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/9.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/10.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/11.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/12.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/13.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/14.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/4.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/5.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/6.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/7.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/8.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/9.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/10.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/11.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/4.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/5.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/6.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/7.webp" alt="">
      </div>
        <div class="item">
            <img src="imgs/8.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/9.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/10.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/11.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/14.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/4.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/5.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/6.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/7.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/8.webp" alt="">
        </div>
        <div class="item">
            <img src="imgs/9.webp" alt="">
        </div>
    </div>
</body>

<script>

    var arr =[

    "1.webp",

    "2.webp",

    "3.webp",

    "4.webp",

    "5.webp",

    "6.webp",

    "7.webp",

    "8.webp",

    "9.webp",

    "10.webp",

    "11.webp",

    "12.webp",

    "13.webp",

    "14.webp"

    ];

    // 每次加载的数据量

    var dataCount =20;

    // 防抖（事件循环触发）

    var flag = true;

    // 最大的加载次数

    var maxCout = 10;

    // 单次

    var state=1;

    window.onscroll = function(){

        var pageHeight = document.documentElement.scrollHeight;

        var scrolltop = document.documentElement.scrollTop;

        var pageSeeHeight = document.documentElement.clientHeight;

        // console.log(pageHeight)

        // console.log(scrolltop)

        // console.log(pageSeeHeight)


        // 确定 下拉刷新的触发区间

        if(pageHeight-scrolltop-pageSeeHeight<=200 && flag &&state<=10){

            state++;

            flag = false

            // <div class="item">

            // <img src="imgs/9.webp" alt="">

            // </div>
            // 生成结构 将数据处理在 结构
           for(var i=0;i<dataCount;i++){
            var rangeIndex = Math.floor(Math.random()*arr.length)  
            var div = document.createElement("div");
                div.className = "item"

            var img = document.createElement("img");
                 img.src ="imgs/"+arr[rangeIndex]   //1.webp
                 div.appendChild(img)
                 document.getElementById("container").appendChild(div)
           }
           console.log("加载 load....")
        }else{
            flag = true
        }
    }

</script>