jQuery ias是流式分页插件，随着用户滚轴的滚动而自动去加载下一页数据。网上也有很多的教程，但是笔者认为在交互方面还需强调一下。
1、插件下载地址
https://plugins.jquery.com/ias/
2、应用示例
笔者先用一个简单的例子来展示ias的基本用法。首先需要引入JS如下：
<script src="/blog/js/jquery.ias.js"></script> 
其中HTML网页中需包含类似如下内容：
<div class="content">
<!-- 分页开始 -->
<article class="excerpt excerpt-1">
<header><a class="cat" href="program">ias<i></i></a>
<h2><a href="" target="_blank" title="">ias使用方法</a></h2>
</header>
<p class="meta">
<time class="time"><i class="glyphicon glyphicon-time"></i>2017</time>
<span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p>
<p class="note">ias使用... </p>
</article>
<article class="excerpt excerpt-1">
<header><a class="cat" href="program">ias<i></i></a>
<h2><a href="" target="_blank" title="">ias使用方法</a></h2>
</header>
<p class="meta">
<time class="time"><i class="glyphicon glyphicon-time"></i>2017</time>
<span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p>
<p class="note">ias使用... </p>
</article>
<!-- 分页结束 -->
</div>
<nav class="pagination" style="display: none;">
<ul>
<li class="next-page"><a href="/article/index?pageNo={* pageNo *}">下一页</a></li>
</ul>
</nav>如上所示，HTML中需要有两大要素：分页数据、翻页标签。其中一般来说带有分页URL的模块，都是隐藏的，以满足页面美观需要。
然后就是加入JS代码如下：
jQuery.ias({
history: false,
container : '.content',
item: '.excerpt',
pagination: '.pagination',
next: '.next-page a',
trigger: '查看更多',
loader: '<div class="pagination-loading"><img src="/blog/images/loading.gif" /></div>',
triggerPageThreshold: 5,
onRenderComplete: function() {
$('.excerpt .thumb').lazyload({
placeholder: '/blog/images/occupying.png',
threshold: 400
});
$('.excerpt img').attr('draggable','false');
$('.excerpt a').attr('draggable','false');
}
});下面详细的介绍一下相关的参数含义：
- container：分页数据的上一层标签定位，这里指的是class='content'的标签。
- item：在container中的一条条的分页数据的定位标识，这里指的是class='excerpt'的标签。
- pagination：分页模块的顶层标签，这里指的是class='pagination'的标签，插件会自动将其隐藏。
- next：用以获取下一页的分页连接，这里指的是class='next-page'下面的a标签。
- trigger：当分页自动加载到一定页数后，会触发手动分页。该参数就是其展示值。如果不设置，则会显示默认值。
- loader：自动加载器内容，是一个html标签。如果不设置，则会显示默认值。
- triggerPageThreshold：自动加载的数量。如上所示，当触发自动加载时，则会自动加载5页的内容。
其他参数请参见官方文档：https://infiniteajaxscroll.com/docs/overview.html
3、注意事项
在进行AJAX分页的时候，返回的分页数据是全量的第二页数据。意思就是除了有分页的内容外，还有页面的其他部分内容。这里虽然返回的是全量的下一页数据，但是页面并没有全量刷新。（但是笔者认为，这样的分页会浪费一些服务器资源）
