瀑布流分页

网上看了写jquery.infinitescroll.js和jquery.masonry.js做的瀑布流分页但是都有问题，到了第二页就不行了。
可能是没有找到正确的例子，下面是我自己想的一个办法解决。

首先是列表：

<div class="cs-style item_list infinite_scroll">
    <div class="item">item</div>
</div>

下面是给出分页的连接：

<div id="more">
    <a href="/list?page=2&baseNumber=0"></a>
</div>

上面的baseNumber就是一个基数，如果是第一页那么load的就是第二页，后台判断一下使用0+2，如果详细翻了4页，那么基数就是3，就是这样。

下面是JS代码：

<script type="text/javascript">
    function item_masonry() {
        $('.infinite_scroll').load(function() {
            $('.infinite_scroll').masonry({
                itemSelector: '.masonry_brick',
                columnWidth: 445,
                gutterWidth: 0
            });
        });
        $('.infinite_scroll').masonry({
            itemSelector: '.masonry_brick',
            columnWidth: 445,
            gutterWidth: 0
        });
    }
    $(function() {
        [#if page.pageNumber==page.totalPages] // 这里判断是否是最后一页，最后一页直接显示分页信息
            $("#pages").show();
            return;
        [/#if]
        function item_callback() {
            item_masonry();
        }
        item_callback();
        $('.item').fadeIn();
        var sp = 1;
        $(".infinite_scroll").infinitescroll({
            navSelector: "#more",
            nextSelector: "#more a",
            itemSelector: ".item",
            loading: {
                img: "/images/loding.gif",
                msgText: '加载中...',
                finishedMsg: '木有了',
                finished: function() {
                    sp++;
                    if (sp >= 4 || (sp + ${page.pageNumber!"0"}) > ${page.totalPages}) {
                        // 每次瀑布流加载4页，判断是否超过了最后一页
                        // 以下代码请自行处理，这段代码作用是，瀑布流加载完成后将当前加载的页面的分页信息标为已加载
                        var nowactive = $("#pages #pageactive");
                        var index = 0;
                        while(index < 4 && nowactive.next().length) {
                            index++;
                            nowactive.addClass("pageactive");
                            nowactive.attr("href", "javascript:void(0);");
                            nowactive = nowactive.next();
                        }
                        if(nowactive.text() == "下一页") {
                            nowactive.addClass("pageactive");
                            nowactive.attr("href", "javascript:void(0);");
                        } else {
                            $("#pages a:last").attr("href", nowactive.attr("href"));
                        }
                        $("#pages").show(); // 显示分页信息
                        $("#more").remove();
                        $("#infscr-loading").hide();
                        $(window).unbind('.infscr');
                    }
                }
            }
        }, function(newElements) {
            var $newElems = $(newElements);
            $('.infinite_scroll').masonry('appended', $newElems, false);
            $newElems.fadeIn();
            item_callback();
            return;
        });
    });
</script>

还有就是加载后的页面的高度js居然显示为0，可能是上面还需要设置高度，但是确实不想去搞了，所以写段css解决：

.infinite_scroll{height:auto!important;}

最重要的其实就是使用一个基数那里，其他的自己都可以搞定了。

好了，我发现这个问题了，主要是使用加载图片的时候，$('.infinite_scroll').load关键就是这个方法了，这里应该使用方法imagesLoaded而不是load，如果使用load需要选择器选择的应该是图片$('.infinite_scroll img').load，我猜想大概是因为要加载图片后才能计算高度。

有时候我们会遇到很多问题，我们可以加上debug : true参数查看信息。

比如我之前一直没有找到为什么不加载第二页，加上后提示：Your nextSelector found no elements.原来下一页的里面没有分页的a标签。