一、原理:当滚动条到达底部时,执行下一页内容。

判断条件需要理解三个概念:
    1.scrollHeight 真实内容的高度
    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度
    3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离

思路:
    1.使用fixed定位加载框
    2.使用$(window).scroll();方法来触发是否加载

3.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 5 ,作为加载触发的条件

JavaScript代码:第一种方式

<script type="text/javascript">
var page=2; //当前页的页码
var allpage; //总页码,会从后台获取
var catid="{$catid}";
function showAjax(page){
$.ajax({
url:"",
type:"post",
data:{page:page,catid:catid},
success:function(data){
//要执行的内容
showContent(data);
}
})
}
function scrollFn(){
//真实内容的高度
var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
//视窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隐藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(pageHeight - viewportHeight - scrollHeight < 50){//如果满足触发条件,执行
showAjax(page);
}
}
function showContent(data){
var list=eval('('+data+')');
var ss='';
for (var i in list) {
ss=ss+'<li><a href="'+list[i]['url']+'">'+list[i]['title']+'</a></li>';
}
$(".minsuList").append(ss);
page++; //页数加1
}
$(window).bind("scroll",scrollFn);//绑定滚动事件
</script>

 

<script>

    var catid="6";
var url="/index.php?m=content&c=index&a=ajax_content";
var p=2;
$(window).bind("scroll",function(){
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
var closeToBottom = $(window).scrollTop() + winHeight > $(document).height() - 50; if(parseInt($("#pages a:nth-last-child(2)").text())<p){
$(".page_loading").html('已经最底部了...');
return false;
}; if(closeToBottom){
ajax_content();
}
}); function ajax_content(){
$.post(url,{catid:catid,p:p},function(res){
tplshow(res);
},"json");
p++;
} function tplshow(res){
var datas=res.lists;
var appendli="";
for(var i=0;i<datas.length;i++){
var data=datas[i];
if(data.title!=""){
appendli+='<li>'+data.title+'</li>'
}
}
var $appendli=$(appendli);
$(".modlenews").append($appendli);
} function timeConver(time){
var time= new Date(parseInt(time));
var hour = time.getHours();
var minute = time.getMinutes();
return [hour,minute].join(':');
}
</script>

  

 

二、

$(window).scroll(function () {
     //已经滚动到上面的页面高度
    var scrollTop = $(this).scrollTop();
     //页面高度
    var scrollHeight = $(document).height();
      //浏览器窗口高度
    var windowHeight = $(this).height();
     //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
     if (scrollTop + windowHeight == scrollHeight) {
                    dragThis.insertDom();
      }
});

三、js插件

移动端下拉刷新、上拉加载更多插件dropload

js 实现无限加载分页(适合移动端)的更多相关文章

  1. js实现移动端无限加载分页

    原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...

  2. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  3. JS实现-页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...

  4. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  5. JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  6. 实现select下拉框的无限加载(懒加载)

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  7. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  8. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

随机推荐

  1. hbase java Api练习

    package cn.itcast_01_hbase; import java.util.ArrayList; import java.util.List; import org.apache.had ...

  2. SQLServer 批量备份与还原

    备份与还原是数据库避不开的主题,而作为DBA,经常会面临将一台机器上的所有数据库重新构建到一台新机器上的要求: 在现在都讲究自动化管理的时代,传统的界面操作备份还原的做法不仅浪费时间和精力,而且还很容 ...

  3. SQL2005 第一次配置没有服务器名称的问题

    问题描述:第一次启动没有服务器名称 解决方法: 1.进入 我的电脑——属性——管理——服务 找到SQL Server 右键属性 弹出下图 找到可执行文件路径 鼠标左键拖到底部 看到 -s实例名,这里的 ...

  4. Android开发人员必须掌握的10 个开发工具+应该深入学习的10个开源应用项目

    一.Android开发人员必须掌握的10 个开发工具 Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. ...

  5. 64位系统下,一个32位的程序究竟可以申请到多少内存,4GB还是更多?(一)

    前言: cpu的位是指一次性可处理的数据量是多少,1字节=8位,32位处理器可以一次性处理4个字节的数据量,依次类推.32位操作系统针对的32位的CPU设计.64位操作系统针对的64位的CPU设计.操 ...

  6. (转)Java锁、自旋锁、CAS机制

    转自:http://www.jb51.net/article/55381.htm 转自:http://blog.csdn.net/aesop_wubo/article/details/7537278 ...

  7. Python 个人常用汇总

    Python 常用文件操作总结: 导入库路径:sys.path.append('/usr/local/lib/python2.7/site-packages') from random import ...

  8. django用户认证系统——注册3

    用户注册就是创建用户对象,将用户的个人信息保存到数据库里.回顾一下 Django 的 MVT 经典开发流程,对用户注册功能来说,首先创建用户模型(M),这一步我们已经完成了.编写注册视图函数(V),并 ...

  9. 【BZOJ3931】[CQOI2015]网络吞吐量 最大流

    [BZOJ3931][CQOI2015]网络吞吐量 Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为 ...

  10. 【BZOJ4870】[Shoi2017]组合数问题 动态规划(矩阵乘法)

    [BZOJ4870][Shoi2017]组合数问题 Description Input 第一行有四个整数 n, p, k, r,所有整数含义见问题描述. 1 ≤ n ≤ 10^9, 0 ≤ r < ...