当前位置：Gxlcms > JavaScript > JavaScript实现无穷滚动加载数据

JavaScript实现无穷滚动加载数据

时间：2021-07-01 10:21:17 帮助过：4人阅读

首先实现滚动要借助onscroll事件处理程序。

无穷滚动就是滑动滚动条，实现数据块的无穷加载。

我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时，它会进行加载。那么问题就是在判断什么时候应该加载。

我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时，也就无疑是最后一个图片了。所以要判断该图片加载到什么程度来触发滚动事件。
图上灰色的表示页面的大小，后面蓝色边框表示窗口的大小。当拖动滚动条时，灰色部分上移。我们希望页面最后一个图片（蓝色图片）加载一半时触发滚动事件。那么就要形成参照。

下来写代码：

  1. //检测是否具备滚动条加载数据块的条件
  2. function checkScrollSlide(){
  3.  var oparent = document.getElementById('main');
  4.  var oBoxs = getByClass(oparent,'box');
  5.  var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight;
  6.  var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);
  7.  return (lastBoxH < scrollH )? true : false;
  8. }

getClass是根据类名查找元素集合的自己写的函数，待会儿会附上源码

我们要进行加载的数据块的格式是这样的.每个图片被一个class= pic的div包裹。最后整体属于父元素main

  1. <div id = "main">
  2.  <div class = "box">
  3.   <div class = "pic">
  4.    <img src = "images/0.jpg">
  5.   </div>
  6.  </div>
  7.  <div class = "box">
  8.   <div class = "pic">
  9.    <img src = "images/1.jpg">
  10.   </div>
  11.  </div>
  12.  <div class = "box">
  13.   <div class = "pic">
  14.    <img src = "images/2.jpg">
  15.   </div>
  16.  </div>
  17. <div>

首先我们要加载的数据块应该是从后台传过来的，在这里我们用json模拟一下就可以：

var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};

比如这个就是后台传过来的数据。

上面的函数返回一个布尔值，当为true时，触发滚动事件。

  1.  window.onscroll = function(){
  2.  var oparent = document.getElementById('main');
  3.  //当满足加载条件时，就要向页面中加载数据块
  4.  if(checkScrollSlide){
  5.   for(var i = 0; i< DataIn.data.length; i++){
  6.     var oBox = document.createElement('div');
  7.     oBox.className = 'box';
  8.     oparent.appendChild(oBox);
  9.     var opic = document.createElement('div');
  10.     opic.className = 'pic';
  11.     oBox.appendChild(opic);
  12.     var oImg = document.createElement('img');
  13.     oImg.src = './images/'+DataIn.data[i].src;
  14.     opic.appendChild(oImg);
  15.    }
  16.    waterFull('main','box');
  17.   }
  18.  }
  19. }

附上源码：

css和html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset = "utf-8" />
  5. <script src = "./jswaterfll.js"></script>
  6.  <title>瀑布流布局</title>
  7.  <style type="text/css">
  8.  *{
  9.  padding: 0px;
  10.  margin: 0px;
  11.  }
  12.  #main{
  13.  position: relative;
  14.  }
  15.  .box{
  16. /* display: inline-block;*/
  17.  padding: 15px 0px 0px 15px;
  18.  float: left;
  19.  }
  20.  .pic{
  21.  padding: 10px;
  22.  border-radius: 5px;
  23.  border:1px solid #ccc;
  24.  box-shadow: 0 0 5px #ccc;
  25.  }
  26.  .pic img{
  27.  width: 165px;
  28.  height: auto;
  29.  }
  30.  </style>
  31. </head>
  32. <body>
  33. <div id = 'main'>
  34.  <div class = "box">
  35.  <div class = "pic">
  36.   <img src = "images/3.jpg">
  37.  </div>
  38.  </div>
  39.  <div class = "box">
  40.  <div class = "pic">
  41.   <img src = "images/4.jpg">
  42.  </div>
  43.  </div>
  44.  <div class = "box">
  45.  <div class = "pic">
  46.   <img src = "images/20.jpg">
  47.  </div>
  48.  </div>
  49.  <div class = "box">
  50.  <div class = "pic">
  51.   <img src = "images/21.jpg">
  52.  </div>
  53.  </div>
  54.  <div class = "box">
  55.  <div class = "pic">
  56.   <img src = "images/2.jpg">
  57.  </div>
  58.  </div>
  59.  <div class = "box">
  60.  <div class = "pic">
  61.   <img src = "images/3.jpg">
  62.  </div>
  63.  </div>
  64.  <div class = "box">
  65.  <div class = "pic">
  66.   <img src = "images/4.jpg">
  67.  </div>
  68.  </div>
  69.  <div class = "box">
  70.  <div class = "pic">
  71.   <img src = "images/5.jpg">
  72.  </div>
  73.  </div>
  74.  <div class = "box">
  75.  <div class = "pic">
  76.   <img src = "images/6.jpg">
  77.  </div>
  78.  </div>
  79.  <div class = "box">
  80.  <div class = "pic">
  81.   <img src = "images/7.jpg">
  82.  </div>
  83.  </div>
  84.  <div class = "box">
  85.  <div class = "pic">
  86.   <img src = "images/8.jpg">
  87.  </div>
  88.  </div>
  89.  <div class = "box">
  90.  <div class = "pic">
  91.   <img src = "images/9.jpg">
  92.  </div>
  93.  </div>
  94.  <div class = "box">
  95.  <div class = "pic">
  96.   <img src = "images/10.jpg">
  97.  </div>
  98.  </div>
  99.  <div class = "box">
  100.  <div class = "pic">
  101.   <img src = "images/11.jpg">
  102.  </div>
  103.  </div>
  104.  <div class = "box">
  105.  <div class = "pic">
  106.   <img src = "images/17.jpg">
  107.  </div>
  108.  </div>
  109.  <div class = "box">
  110.  <div class = "pic">
  111.   <img src = "images/18.jpg">
  112.  </div>
  113.  </div>
  114.  <div class = "box">
  115.  <div class = "pic">
  116.   <img src = "images/19.jpg">
  117.  </div>
  118.  </div>
  119.  <div class = "box">
  120.  <div class = "pic">
  121.   <img src = "images/4.jpg">
  122.  </div>
  123.  </div>
  124.  <div class = "box">
  125.  <div class = "pic">
  126.   <img src = "images/5.jpg">
  127.  </div>
  128.  </div>
  129.  <div class = "box">
  130.  <div class = "pic">
  131.   <img src = "images/6.jpg">
  132.  </div>
  133.  </div>
  134.  <div class = "box">
  135.  <div class = "pic">
  136.   <img src = "images/7.jpg">
  137.  </div>
  138.  </div>
  139.  <div class = "box">
  140.  <div class = "pic">
  141.   <img src = "images/8.jpg">
  142.  </div>
  143.  </div>
  144.  <div class = "box">
  145.  <div class = "pic">
  146.   <img src = "images/11.jpg">
  147.  </div>
  148.  </div>
  149.  <div class = "box">
  150.  <div class = "pic">
  151.   <img src = "images/12.jpg">
  152.  </div>
  153.  </div>
  154.  <div class = "box">
  155.  <div class = "pic">
  156.   <img src = "images/13.jpg">
  157.  </div>
  158.  </div>
  159.  <div class = "box">
  160.  <div class = "pic">
  161.   <img src = "images/14.jpg">
  162.  </div>
  163.  </div>
  164.  <div class = "box">
  165.  <div class = "pic">
  166.   <img src = "images/15.jpg">
  167.  </div>
  168.  </div>
  169.  <div class = "box">
  170.  <div class = "pic">
  171.   <img src = "images/16.jpg">
  172.  </div>
  173.  </div>
  174.  <div class = "box">
  175.  <div class = "pic">
  176.   <img src = "images/17.jpg">
  177.  </div>
  178.  </div>
  179.  <div class = "box">
  180.  <div class = "pic">
  181.   <img src = "images/18.jpg">
  182.  </div>
  183.  </div>
  184.  <div class = "box">
  185.  <div class = "pic">
  186.   <img src = "images/19.jpg">
  187.  </div>
  188.  </div>
  189.  <div class = "box">
  190.  <div class = "pic">
  191.   <img src = "images/20.jpg">
  192.  </div>
  193.  </div>
  194.  <div class = "box">
  195.  <div class = "pic">
  196.   <img src = "images/21.jpg">
  197.  </div>
  198.  </div>
  199. </div>
  200. </body>
  201. </html>

js代码：

  1. window.onload = function(){
  2.  waterFull('main','box');
  3.  var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
  4.  window.onscroll = function(){
  5.   var oparent = document.getElementById('main');
  6.   if(checkScrollSlide){
  7.    for(var i = 0; i< DataIn.data.length; i++){
  8.     var oBox = document.createElement('div');
  9.     oBox.className = 'box';
  10.     oparent.appendChild(oBox);
  11.     var opic = document.createElement('div');
  12.     opic.className = 'pic';
  13.     oBox.appendChild(opic);
  14.     var oImg = document.createElement('img');
  15.     oImg.src = './images/'+DataIn.data[i].src;
  16.     opic.appendChild(oImg);
  17.    }
  18.    waterFull('main','box');
  19.   }
  20.  }
  21. }
  22. function waterFull(parent,children){
  23.  var oParent = document.getElementById(parent);
  24.  //var oBoxs = parent.querySelectorAll(".box");
  25.   var oBoxs = getByClass(oParent,children);
  26.  //计算整个页面显示的列数
  27.  var oBoxW = oBoxs[0].offsetWidth;
  28.  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  29.  //设置main的宽度，并且居中
  30.  oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
  31.  //找出高度最小的图片，将下一个图片放在下面
  32.  //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度
  33.  var arrH = [];
  34.  for(var i = 0; i< oBoxs.length ; i++){
  35.   if(i < cols){
  36.    arrH.push(oBoxs[i].offsetHeight);
  37.   }
  38.   else{
  39.    var minH = Math.min.apply(null,arrH);
  40.    var minIndex = getMinhIndex(arrH,minH);
  41.    oBoxs[i].style.position = 'absolute';
  42.    oBoxs[i].style.top= minH + 'px';
  43.    //oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
  44.    oBoxs[i].style.left = oBoxs[minIndex].offsetLeft+'px';
  45.    arrH[minIndex] += oBoxs[i].offsetHeight; 
  46.   }
  47.  }
  48. }
  49. function getByClass(parent,className){
  50.  var boxArr = new Array();//用来获取所有class为box的元素
  51.  oElement = parent.getElementsByTagName('*');
  52.  for (var i = 0; i <oElement.length; i++) {
  53.   if(oElement[i].className == className){
  54.    boxArr.push(oElement[i]);
  55.   }
  56.  };
  57.  return boxArr;
  58. }
  59. //获取当前最小值得下标
  60. function getMinhIndex(array,min){
  61.  for(var i in array){
  62.   if(array[i] == min)
  63.    return i;
  64.  }
  65. }
  66. //检测是否具备滚动条加载数据块的条件
  67. function checkScrollSlide(){
  68.  var oparent = document.getElementById('main');
  69.  var oBoxs = getByClass(oparent,'box');
  70.  var scrollH = document.body.scrollTop || document.documentElement.scrollTop + document.body.clientHeight || document.documentElement.clientHeight;
  71.  var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);
  72.  return (lastBoxH < scrollH )? true : false;
  73. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！