新浦京81707con > 注册购买 > javascript滚动加载,JavaScript实现无穷滚动加载数据

原标题:javascript滚动加载,JavaScript实现无穷滚动加载数据

浏览次数:161 时间:2019-08-14

率先落到实处滚动要借助onscroll事件管理程序。

JavaScript完成无穷滚动加载数据,javascript滚动加载

先是落实滚动要借助onscroll事件管理程序。

Infiniti滚动正是滑动滚动条,达成数据块的Infiniti加载。

小编们以瀑布流的布局来兑现无穷加载。瀑布流正是局地等宽不等高的多少块布局。在滚动条下拉时,它会进行加载。那么问题就是在认清哪些时候理应加载。

图片 1

笔者们第一应该领悟瀑布流布局的表征。它将下二个图纸总是放在近期列数最低的那一列。所以当加载最终叁个木色的图样时,也就活生生是终极贰个图纸了。所以要咬定该图形加载到什么程度来触发滚动事件。
图上赤褐的意味页面包车型地铁高低,前边赫色边框表示窗口的大小。当拖动滚动条时,中灰部分升高。大家愿意页面最后二个图纸(深黑褐图片)加载八分之四时接触滚动事件。那么快要产生参照。

下来写代码:

//检测是否具备滚动条加载数据块的条件
function checkScrollSlide(){
 var oparent = document.getElementById('main');
 var oBoxs = getByClass(oparent,'box');
 var scrollH = document.body.scrollTop || document.documentElement.scrollTop   document.body.clientHeight || document.documentElement.clientHeight;
 var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop   Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);

 return (lastBoxH < scrollH )? true : false;
}

getClass是基于类名查找成分会集的要好写的函数,待会儿会附着源码

大家要开始展览加载的数据块的格式是如此的.各类图片被叁个class= pic的div包裹。最后全体属于父成分main

<div id = "main">
 <div class = "box">
  <div class = "pic">
   <img src = "images/0.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/1.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/2.jpg">
  </div>
 </div>
<div>

第一大家要加载的数据块应该是从后台传过来的,在此间大家用json模拟一下就可以:

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

举个例子那些正是后台传过来的数码。

地点的函数重临三个布尔值,当为true时,触发滚动事件。

 window.onscroll = function(){
 var oparent = document.getElementById('main');
 //当满足加载条件时,就要向页面中加载数据块
 if(checkScrollSlide){
  for(var i = 0; i< DataIn.data.length; i  ){
    var oBox = document.createElement('div');
    oBox.className = 'box';
    oparent.appendChild(oBox);

    var opic = document.createElement('div');
    opic.className = 'pic';
    oBox.appendChild(opic);

    var oImg = document.createElement('img');
    oImg.src = './images/' DataIn.data[i].src;
    opic.appendChild(oImg);

   }
   waterFull('main','box');
  }
 }
}

依靠源码:

css和html

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
 <title>瀑布流布局</title>
 <style type="text/css">
 *{
 padding: 0px;
 margin: 0px;
 }

 #main{
 position: relative;

 }
 .box{
/* display: inline-block;*/
 padding: 15px 0px 0px 15px;
 float: left;

 }
 .pic{
 padding: 10px;
 border-radius: 5px;
 border:1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 }

 .pic img{
 width: 165px;
 height: auto;
 }
 </style>
</head>
<body>
<div id = 'main'>
 <div class = "box">
 <div class = "pic">
  <img src = "images/3.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/4.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/20.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/21.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/2.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/3.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/4.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/5.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/6.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/7.jpg">
 </div>
 </div>

 <div class = "box">
 <div class = "pic">
  <img src = "images/8.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/9.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/10.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/11.jpg">
 </div>
 </div>

 <div class = "box">
 <div class = "pic">
  <img src = "images/17.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/18.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/19.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/4.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/5.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/6.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/7.jpg">
 </div>
 </div>

 <div class = "box">
 <div class = "pic">
  <img src = "images/8.jpg">
 </div>
 </div>

 <div class = "box">
 <div class = "pic">
  <img src = "images/11.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/12.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/13.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/14.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/15.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/16.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/17.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/18.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/19.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/20.jpg">
 </div>
 </div>
 <div class = "box">
 <div class = "pic">
  <img src = "images/21.jpg">
 </div>
 </div>
</div>
</body>
</html>

js代码:

window.onload = function(){
 waterFull('main','box');

 var DataIn = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
 window.onscroll = function(){
  var oparent = document.getElementById('main');
  if(checkScrollSlide){
   for(var i = 0; i< DataIn.data.length; i  ){
    var oBox = document.createElement('div');
    oBox.className = 'box';
    oparent.appendChild(oBox);

    var opic = document.createElement('div');
    opic.className = 'pic';
    oBox.appendChild(opic);

    var oImg = document.createElement('img');
    oImg.src = './images/' DataIn.data[i].src;
    opic.appendChild(oImg);

   }
   waterFull('main','box');
  }
 }
}

function waterFull(parent,children){
 var oParent = document.getElementById(parent);
 //var oBoxs = parent.querySelectorAll(".box");

  var oBoxs = getByClass(oParent,children);

 //计算整个页面显示的列数

 var oBoxW = oBoxs[0].offsetWidth;

 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

 //设置main的宽度,并且居中

 oParent.style.cssText = 'width:' oBoxW * cols  'px; margin: 0 auto';

 //找出高度最小的图片,将下一个图片放在下面

 //定义一个数组,存放每一列的高度,初始化存的是第一行的所有列的高度

 var arrH = [];

 for(var i = 0; i< oBoxs.length ; i  ){
  if(i < cols){
   arrH.push(oBoxs[i].offsetHeight);
  }
  else{
   var minH = Math.min.apply(null,arrH);

   var minIndex = getMinhIndex(arrH,minH);

   oBoxs[i].style.position = 'absolute';
   oBoxs[i].style.top= minH   'px';
   //oBoxs[i].style.left = minIndex * oBoxW   'px'; 
   oBoxs[i].style.left = oBoxs[minIndex].offsetLeft 'px';

   arrH[minIndex]  = oBoxs[i].offsetHeight; 
  }
 }


}
function getByClass(parent,className){

 var boxArr = new Array();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

 for (var i = 0; i <oElement.length; i  ) {

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}


//获取当前最小值得下标
function getMinhIndex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

//检测是否具备滚动条加载数据块的条件
function checkScrollSlide(){
 var oparent = document.getElementById('main');
 var oBoxs = getByClass(oparent,'box');
 var scrollH = document.body.scrollTop || document.documentElement.scrollTop   document.body.clientHeight || document.documentElement.clientHeight;
 var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop   Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);

 return (lastBoxH < scrollH )? true : false;
}

上述便是本文的全部内容,希望对我们的读书抱有帮助,也期待大家多多支持帮客之家。

首先落成滚动要借助onscroll事件处理程序。 无穷滚动正是滑动滚动条,完毕数据块的无穷...

深信不疑广大人都见过瀑布流图片布局,这一个图片是动态加载出来的,效果很好,对服务器的下压力相对来讲也小了成都百货上千,用鼠标操作的时候相信都见过那样的功效:步入qq空间,向下拉动空间,到底层时,会动态加载剩余的说说可能是日志 ,前几天我们就来拜会她们的兑现思路和js调节动态加载的代码。

无边滚动正是滑动滚动条,达成数据块的无边加载。

下边包车型地铁代码重借使调节滚动条下拉时的加载事件的,无论是加载图片依旧加载记录数据  都得以。

我们以瀑布流的布局来贯彻无穷加载。瀑布流就是一些等宽不等高的数目块布局。在滚动条下拉时,它会进展加载。那么难点便是在认清几时应该加载。

加载jQuery库后大家得以如此使用:  

图片 2

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop   windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage'))   1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page   1);

    }
  });

我们率先应当明了瀑布流布局的风味。它将下二个图纸总是放在脚下列数最低的那一列。所以当加载最终叁个豆灰的图形时,也就活生生是最后四个图片了。所以要一口咬住不放该图形加载到何以水平来触发滚动事件。
图上深藕红的代表页面包车型大巴大大小小,前面浅莲红边框表示窗口的分寸。当拖动滚动条时,浅绿部分发展。大家期待页面最后二个图片(雪青图片)加载十分之五时接触滚动事件。那么将要产生参照。

解析:

下来写代码:

判定滚动条到底层,须要用到DOM的八个属性值,即scrollTop、clientHeight、scrollHeight。

//检测是否具备滚动条加载数据块的条件
function checkScrollSlide(){
 var oparent = document.getElementById('main');
 var oBoxs = getByClass(oparent,'box');
 var scrollH = document.body.scrollTop || document.documentElement.scrollTop   document.body.clientHeight || document.documentElement.clientHeight;
 var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop   Math.floor(oBoxs[oBoxs.length - 1].offsetHeight/2);

 return (lastBoxH < scrollH )? true : false;
}
  • scrollTop为滚动条在Y轴上的轮转距离。
  • clientHeight为剧情可视区域的中度。
  • scrollHeight为内容可视区域的惊人加上溢出(滚动)的偏离。

getClass是根据类名查找成分会集的和谐写的函数,待会儿会附着源码

从这么些四个天性的介绍就可以看出来,滚动条到底层的标准即为scrollTop clientHeight == scrollHeight。 

本文由新浦京81707con发布于注册购买,转载请注明出处:javascript滚动加载,JavaScript实现无穷滚动加载数据

关键词: 新浦京81707con

上一篇:转换类代码,PHP实现的汉字拼音转换和公历农历

下一篇:没有了