首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现无穷滚动加载数据

- Author -

画一生情入颜容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 组件之旅（一）分析和设计
Oct 28 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
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
道歉信(39) 心得体会(660) 演讲稿(869) 岗位职责(1324) 思想汇报(404) 创业计划书(312) 欢迎词(65) 职业生涯规划书(234) 证婚词(21) 介绍信(57)
You might like
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice，梦开始的地方
2017/03/13 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
浅谈python中的正则表达式（re模块）
2017/10/17 Python
python如何将多个PDF进行合并
2019/08/13 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
程序员机试试题汇总
2012/03/07 面试题
Java中会存在内存泄漏吗，请简单描述
2016/12/22 面试题
养殖行业的创业计划书
2014/01/05 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
父母对孩子的寄语
2014/04/09 职场文书
2014年防汛工作总结
2014/12/08 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python