瀑布流分页

网上看了写jquery.infinitescroll.jsjquery.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标签。