JavaScript实现无穷滚动加载数据


Posted in Javascript onMay 06, 2017

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

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

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

JavaScript实现无穷滚动加载数据

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

下来写代码:

//检测是否具备滚动条加载数据块的条件
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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用原生JS实现弹出层特效
Dec 22 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Angularjs2不同组件间的通信实例代码
May 06 #Javascript
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
详解node HTTP请求客户端 - Request
May 05 #Javascript
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
JavaScript仿微信打飞机游戏
Jul 05 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
prototype class详解
2006/09/07 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue如何获取点击事件源的方法
2017/08/10 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
JS实现li标签的删除
2019/04/12 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Python多进程写入同一文件的方法
2019/01/14 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python的collections模块真的很好用
2021/03/01 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
事业单位竞聘上岗实施方案
2014/03/28 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
总结高并发下Nginx性能如何优化
2021/11/01 Servers