使用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获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue.js循环radio的实例
Nov 07 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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生成短网址方法汇总
2016/07/12 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python实现Dijkstra算法
2018/10/17 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python使用建议技巧分享(三)
2020/08/18 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
用python批量下载apk
2020/12/29 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
Linux的文件类型
2016/07/05 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
个人贷款承诺书
2014/03/28 职场文书
代理人委托书
2014/09/16 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
电力培训学习心得体会
2016/01/11 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA