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 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python excel转换csv代码实例
2019/08/26 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
音乐教师求职信
2014/06/28 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
战马观后感
2015/06/08 职场文书
护士心得体会范文
2016/01/25 职场文书