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

登录/ 注册
站长工具
 找回密码
 立即注册
QQ登录
搜索
返回列表 发新帖

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

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

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

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

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

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

©2015-2022 www.tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部