js实现滚动条下拉加载图片功能-Discuz教程下载

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

来自版块: Discuz教程发表于: 2024-7-1 23:07:06
206
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员,全站资源免费下
  1.   <style>
  2.           *{
  3.               margin: 0;
  4.               padding: 0;
  5.           }

  6.           img{
  7.               vertical-align: top;
  8.               height: 200px;
  9.               border-radius: 15px;
  10.               width: 100%;
  11.               object-fit: cover;
  12.           }
  13.           #container{
  14.               width: 100%;
  15.               display: flex;
  16.               flex-wrap: wrap;
  17.           }
  18.           .item{
  19.               margin: 10px;
  20.               border-radius: 15px;
  21.               flex-grow: 1;
  22.           }
  23.           #container::after{
  24.               content: "";
  25.               flex-grow: 999999999;
  26.           }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div id="container">
  31.          <div class="item">
  32.              <img src="imgs/1.webp" alt="">
  33.          </div>
  34.          <div class="item">
  35.             <img src="imgs/2.webp" alt="">
  36.         </div>
  37.         <div class="item">
  38.             <img src="imgs/3.webp" alt="">
  39.         </div>
  40.         <div class="item">
  41.             <img src="imgs/4.webp" alt="">
  42.         </div>
  43.         <div class="item">
  44.             <img src="imgs/5.webp" alt="">
  45.         </div>
  46.         <div class="item">
  47.             <img src="imgs/6.webp" alt="">
  48.         </div>
  49.         <div class="item">
  50.             <img src="imgs/7.webp" alt="">
  51.         </div>
  52.         <div class="item">
  53.             <img src="imgs/8.webp" alt="">
  54.         </div>
  55.         <div class="item">
  56.             <img src="imgs/9.webp" alt="">
  57.         </div>
  58.         <div class="item">
  59.             <img src="imgs/10.webp" alt="">
  60.         </div>
  61.         <div class="item">
  62.             <img src="imgs/11.webp" alt="">
  63.         </div>
  64.         <div class="item">
  65.             <img src="imgs/12.webp" alt="">
  66.         </div>
  67.         <div class="item">
  68.             <img src="imgs/13.webp" alt="">
  69.         </div>
  70.         <div class="item">
  71.             <img src="imgs/14.webp" alt="">
  72.         </div>
  73.         <div class="item">
  74.             <img src="imgs/4.webp" alt="">
  75.         </div>
  76.         <div class="item">
  77.             <img src="imgs/5.webp" alt="">
  78.         </div>
  79.         <div class="item">
  80.             <img src="imgs/6.webp" alt="">
  81.         </div>
  82.         <div class="item">
  83.             <img src="imgs/7.webp" alt="">
  84.         </div>
  85.         <div class="item">
  86.             <img src="imgs/8.webp" alt="">
  87.         </div>
  88.         <div class="item">
  89.             <img src="imgs/9.webp" alt="">
  90.         </div>
  91.         <div class="item">
  92.             <img src="imgs/10.webp" alt="">
  93.         </div>
  94.         <div class="item">
  95.             <img src="imgs/11.webp" alt="">
  96.         </div>
  97.         <div class="item">
  98.             <img src="imgs/4.webp" alt="">
  99.         </div>
  100.         <div class="item">
  101.             <img src="imgs/5.webp" alt="">
  102.         </div>
  103.         <div class="item">
  104.             <img src="imgs/6.webp" alt="">
  105.         </div>
  106.         <div class="item">
  107.             <img src="imgs/7.webp" alt="">
  108.       </div>
  109.         <div class="item">
  110.             <img src="imgs/8.webp" alt="">
  111.         </div>
  112.         <div class="item">
  113.             <img src="imgs/9.webp" alt="">
  114.         </div>
  115.         <div class="item">
  116.             <img src="imgs/10.webp" alt="">
  117.         </div>
  118.         <div class="item">
  119.             <img src="imgs/11.webp" alt="">
  120.         </div>
  121.         <div class="item">
  122.             <img src="imgs/14.webp" alt="">
  123.         </div>
  124.         <div class="item">
  125.             <img src="imgs/4.webp" alt="">
  126.         </div>
  127.         <div class="item">
  128.             <img src="imgs/5.webp" alt="">
  129.         </div>
  130.         <div class="item">
  131.             <img src="imgs/6.webp" alt="">
  132.         </div>
  133.         <div class="item">
  134.             <img src="imgs/7.webp" alt="">
  135.         </div>
  136.         <div class="item">
  137.             <img src="imgs/8.webp" alt="">
  138.         </div>
  139.         <div class="item">
  140.             <img src="imgs/9.webp" alt="">
  141.         </div>
  142.     </div>
  143. </body>

  144. <script>
  145. var arr =[
  146.     "1.webp",
  147.     "2.webp",
  148.     "3.webp",
  149.     "4.webp",
  150.     "5.webp",
  151.     "6.webp",
  152.     "7.webp",
  153.     "8.webp",
  154.     "9.webp",
  155.     "10.webp",
  156.     "11.webp",
  157.     "12.webp",
  158.     "13.webp",
  159.     "14.webp"
  160.     ];
  161.     // 每次加载的数据
  162.     var dataCount =20;
  163.     // 防抖(事件循环触发)
  164.     var flag = true;
  165.     // 最大的加载次数
  166.     var maxCout = 10;
  167.     // 单次
  168.     var state=1;
  169.     window.onscroll = function(){
  170.         var pageHeight = document.documentElement.scrollHeight;
  171.         var scrolltop = document.documentElement.scrollTop;
  172.         var pageSeeHeight = document.documentElement.clientHeight;
  173.         // console.log(pageHeight)
  174.         // console.log(scrolltop)
  175.         // console.log(pageSeeHeight)
  176.         // 确定 下拉刷新的触发区间
  177.         if(pageHeight-scrolltop-pageSeeHeight<=200 && flag &&state<=10){
  178.             state++;
  179.             flag = false
  180.             // <div class="item">
  181.             // <img src="imgs/9.webp" alt="">
  182.             // </div>
  183.             // 生成结构 将数据处理在 结构
  184.            for(var i=0;i<dataCount;i++){
  185.             var rangeIndex = Math.floor(Math.random()*arr.length)  
  186.             var div = document.createElement("div");
  187.                 div.className = "item"
  188.             var img = document.createElement("img");
  189.                  img.src ="imgs/"+arr[rangeIndex]   //1.webp
  190.                  div.appendChild(img)
  191.                  document.getElementById("container").appendChild(div)
  192.            }
  193.            console.log("加载 load....")
  194.         }else{
  195.             flag = true
  196.         }
  197.     }
  198. </script>
复制代码

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部