使用jQuery或者原生js实现鼠标滚动加载页面新数据


Posted in Javascript onMarch 06, 2016

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码。

下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以。

加载jQuery库后我们可以这样使用:  

$(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。

  • scrollTop为滚动条在Y轴上的滚动距离。
  • clientHeight为内容可视区域的高度。
  • scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 

纯js我们可以这样做:

window.onscroll = function() { 
   var scrollTop = document.body.scrollTop; 
   var offsetHeight = document.body.offsetHeight; 
   var scrollHeight = document.body.scrollHeight; 
   if (scrollTop == scrollHeight - offsetHeight) { 
    page++; 
    loadList(page); 
   } 
  }; 
 
 
function loadList(page) { 
   page = page || 1; 
 
   if (isLoad) { 
    getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { 
     if (data.code == 200) { 
      data = data.data; 
      if (data && Object.keys(data).length > 0) { 
       for (var k in data) { 
        var v = data[k]; 
        detailTemplate = detailTemplate.cloneNode(true); 
        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 
        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 
        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 
        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 
        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 
        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 
        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 
        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 
        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 
        postListObj.appendChild(detailTemplate); 
       } 
      } else { 
       isLoad = false; 
      } 
     } else { 
      isLoad = false; 
     } 
    }, function(status) { 
     console.log('Something went wrong, status is ' + status); 
    }); 
   } 
  }

 

Javascript 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js post提交调用方法
Feb 12 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 #Javascript
JavaScript模拟数组合并concat
Mar 06 #Javascript
JavaScript模拟push
Mar 06 #Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 #Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
js 操作符实例代码
2009/10/24 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python迭代器常见用法实例分析
2019/11/22 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python colormap库的安装和使用详情
2020/10/06 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
支教自我鉴定
2014/01/18 职场文书
五心教育心得体会
2014/09/04 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
党员三严三实心得体会
2014/10/13 职场文书
老干部工作汇报材料
2014/10/28 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis