无限滚动插件Infinite Scroll

最近一个项目需要用到无限滚动，调查了很多最后用了Infinite Scroll这个插件。

优点

①ajax的函数是内部已经封装好，所有不需要单独的调用。

②后台返回的形式既可以是静态html形式也可以说json 。

使用infinite-scroll

安装引用就不写了，可以去官网自己看。

1.主的HTML部分

<div class="container"> </div>
<div class="page-load-status"><div class="loader-ellips infinite-scroll-request"><!-- 在加载时显示 --><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span></div><p class="infinite-scroll-last">End of content</p><!-- 最后一页加载完了显示 --><p class="infinite-scroll-error">No more pages to load</p><!-- 加载错误的时候显示 -->
</div>

2.主的css部分

body {font-family: sans-serif;line-height: 1.4;font-size: 18px;margin: 0 auto;
}.page-load-status {display: none;padding-top: 20px;border-top: 1px solid #DDD;text-align: center;color: #777;
}
.loader-ellips {font-size: 20px; /* change size here */position: relative;width: 4em;height: 1em;margin: 10px auto;
}.loader-ellips__dot {display: block;width: 1em;height: 1em;border-radius: 0.5em;background: #555; /* change color here */position: absolute;animation-duration: 0.5s;animation-timing-function: ease;animation-iteration-count: infinite;
}.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }@keyframes reveal {from { transform: scale(0.001); }to { transform: scale(1); }
}@keyframes slide {to { transform: translateX(1.5em) }
}.loader-ellips__dot:nth-child(1) {animation-name: reveal;
}.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {animation-name: slide;
}.loader-ellips__dot:nth-child(4) {animation-name: reveal;animation-direction: reverse;
}

3.页的HTML部分

<div class="container"><article class="post"><!-- 内容 --> </article>
</div>

4.主的js部分，也是最主要的部分

var infScroll = new infinitescroll('.container', {path: function () { var maxPage = 10; //最大页数if (this.loadCount < maxPage) {var pageNumber = this.loadCount + 1;return '/demo/image?page=' + pageNumber;}},append: '.post', // 把页面显示出来的方式,默认是false
//  responseType: 'text', // 设置页面请求返回的响应类型 text时是jsonprefill: true, //预填充 ，加上后append属性必须。status: '.page-load-status',hideNav: '.pagination',history: false, //更改浏览器历史记录和URL。scrollThreshold: 100//设置滚动条与滚动区域之间的距离，默认是400
})

5.几个常用的事件

// 页面请求加载下一页时触发。
infScroll.on('request', function (path) {})// 页面附加到容器前触发。
infScroll.on('load', function (response, path) {});// 页面附加到容器后触发。 append: '.post'有效。
infScroll.on('append', function (response, path, items) {});

6.最后

其他的功能还有一些，主要还是需要去看官方文档。

无限滚动插件Infinite Scroll相关推荐

Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
为什么80%的码农都做不了架构师?>>> 1.什么是 InfiniteScroll? 无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片 ...
c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
【译】无限滚动加载最佳实践
本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/673 原文:https://uxplanet.org/infinite-scrolling-best-p ...
无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...

无限滚动插件Infinite Scroll

优点

使用infinite-scroll

1.主的HTML部分

2.主的css部分

3.页的HTML部分

4.主的js部分，也是最主要的部分

5.几个常用的事件

6.最后

无限滚动插件Infinite Scroll相关推荐

最新文章

热门文章