无穷滚动（Infinite scroll）的实现原理

1 无穷滚动（无限加载）与分页的比较

现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术，大致的原因在于，分页明显地增加了用户的操作行为以及页面加载等待的时间，而网页浏览者往往没什么耐心。

而无穷滚动提供给了读者一种沉浸式的阅读体验。新版的Yahoo.com亦开始拥抱这一技术。

2 无穷滚动的实现原理

(1) 设置存在内容的一个容器“container”，这个容器就放着内容列表；

(2) 设置计时器或者$(window).scroll()事件，计算容器“container”的高度 与 $(window).height()和$(window).scrollTop()之和 的大小关系；

(3) 当前者小于后者时，通过ajax，将新内容append到容器“container”。

3 核心代码演示

$(document).ready(function () { var container = $('容器'); // 获取容器 var i = 0; // 分页值，用于select记录时给limit赋值 $(window).scroll(function () { var containerHeight = container.height() + 121; // 容器高度 + 容器top至文档top的距离　　　　　　　　 var distance = $(window).height() + $(window).scrollTop(); // 视口高度 + 滚动距离 if (containerHeight <= distance) { $.ajax({ type: 'post', url: "控制器/方法", data: {i: i}, success: function (data) { i++; // 分页值+1 $.each(data, function (i, n) { 　　　// 数据处理代码 container.append('新内容'); // append新内容 }); } }); } }); });

4 生产环境代码推荐

当然，上述代码只是阐述了无穷滚动的实现原理，生产环境推荐infinite-scroll

转载于:https://www.cnblogs.com/jxlwqq/p/4340701.html

相关资源：iOS中无限循环滚动简单处理实现原理分析