使用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 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
es6函数之rest参数用法实例分析
Apr 18 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Numpy中的mask的使用
2018/07/21 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python如何求100以内的素数
2020/05/27 Python
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
初中体育教学反思
2014/01/14 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
2015年财政局工作总结
2015/05/21 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python