下拉分页异步加载infinitescroll的使用

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>