第一种(个人强烈推荐的) infinite-scroll 插件
使用方法应该有很多人比我更了解。(写给不了解的人看的)
<script type='text/javascript' src='/js/jquery.js?ver=0.3'></script>
<script src="/js/jquery-ias.min.js" type="text/javascript"></script>
//在此之前必须先加载jq库以及infinite-scroll插件 路径别错了
//infinite-scroll 下载地址看下面
<script type="text/javascript">
var ias = $.ias({
container: ".listbox", //包含所有文章的元素
item: ".item", //对应的每篇文章元素
pagination: ".pagelist", //对应下面的分页元素
next: " .pagelist a[rel^=next] ", //下一页元素
//这里是亮点了,也是我想了半天解决的。
//poscms分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的
});
ias.extension(new IASSpinnerExtension({
src: "http://www.dedediy.com/img/load.gif",
html: '<p style="text-align: center;"><img src="{src}"/></p>'
}));
ias.extension(new IASTriggerExtension({
text: '点击加载更多', //此选项为需要点击时的文字
html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
offset: !1, //设置此项后,到 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载
}));
ias.extension(new IASNoneLeftExtension({
text: '已经加载完成!', // 加载完成时的提示
html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
}));
</script>下面的分页 代码 就不需要我来教了
http://help.xunruicms.com/21.html
{list action=module module=news page=1 pagesize=10 urlrule=index.php?page=[page]}
<li class="item">{$t.title}</li>
{/list}
<div class="pagelist"> {$pages} </div>