1:引入js
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery.infinitescroll.min.js" type="text/javascript"></script>
2:js
$(document).ready(function() {
$('.wrapper:eq(1)').masonry({
itemSelector: '.wfc',
gutterWidth: 15,
columnWidth: 222,
isFitWidth: true
});
$('#waterfall').infinitescroll({
navSelector: "#navigation", //导航的选择器,会被隐藏
nextSelector: "#navigation a", //包含下一页链接的选择器
itemSelector: ".wfc", //你将要取回的选项(内容块)
debug: true, //启用调试信息
animate: true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载,默认150
bufferPx: 40, //载入信息的显示时间,时间越大,载入信息显示时间越短
maxPage:$!{model.get("maxPage")},
donetext: "I think we've hit the end, Jim" ,
errorCallback: function() {
alert('error');
}, //当出错的时候,比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面,默认为false
dataType: 'html',//可以是json
loading: {
msgText: "加载中...",
finishedMsg: '没有新数据了...',
selector: '.loading' // 显示loading信息的div
},
state:
{
currPage: $("#pages_input option:selected").val()
},
pathParse: function (path, page) {
return function (curPage) {
return 'myOrderPage?page=' + curPage+'&openId=$!{model.get("openId")}&cond=$!{model.get("cond")}';
};
}
}, function(newElems) {
//程序执行完的回调函数
var $newElems = $(newElems);
$('.wrapper:eq(1)').masonry('appended', $newElems);
});
});
3:html
<div id="container">
<div class="wrapper">
<div id="waterfall">
<div class="wfc">
<!-- 需要分页的div部分-->
<div class="tyLi mt10">
<!--....-->
</div>
</div>
<div class="loading"></div>
<div id="navigation"><a href="myOrderPage?page=2&openId=$!{model.get("openId")}&cond=$!{model.get("cond")}"></a></div>
</div>
</div>
</div>
4:新建一个html,其中myOrderPage跳转的就是该html
<div class="tyLi mt10">
<!--....-->
</div>