Question

我正在使用砌体来生成“瓷砖” - 我正在使用jQuery进行过滤，以及无限滚动 - 我正在使用它来加载更多服务器端的磁贴。

过滤器可以工作，但是一旦应用了过滤器并且通过无限滚动加载了更多的图块，就会加载未过滤的项目。我知道这背后的原因是因为卸载的磁贴尚未生成客户端，但我宁愿保持这种方式，因为网站将非常快速地获得非常重的数据。

有没有办法在不加载客户端的所有项目的情况下执行此操作？我非常感谢任何意见。我在下面包含了无限滚动脚本。我注意到这个链接（www.creativebloq.com/web-design/filter-web-content-infinite-scroll-10134808），这听起来相当相关，但我不确定它是如何实现的。

!function($){
    var $container  = $(InfiniteConfig.container);
    var pageCount   = 0;
    var cpage       = 1;
    var _next       = $('div.k2Pagination  a:contains("Next")'),
        _divNext    = $('.view-more'),
        _btnNext    = $('a#viewplus'),
        _divLoading = $('div.k2-masonry-loading'),
        _btnLoading = $('div.loading_spinner_wrapper');
    $container.infinitescroll({
            navSelector : InfiniteConfig.navSelector,
            nextSelector: _next,
            itemSelector: InfiniteConfig.itemSelector,
            loading     : {
                selector    : _divLoading,
                img         : _btnLoading.html(),
                msgText     : '',
                speed: 'fast',
                finishedMsg : InfiniteConfig.finishedMsg,
                finished    : function() {
                    _btnLoading.css('display','none');
                    setTimeout(function(){
                        _divNext.css('display','block');
                    },500);
                }, 
            },      
            errorCallback: function(){
                _divNext.css('display','block');
                _divLoading.remove();
                _divNext.addClass('finished').html(InfiniteConfig.finishedMsg);
            },      
            debug       : true,
            path        : function () {
                pageCount += 1;
                var path = $(_next).attr('href')
                var _url = [];

                    _url = path.split('start=');
                    _url[0] += "start";

                url = _url[0];
                numItems = parseInt(_url[1]);
                nextLimit = numItems * (pageCount);
                return [InfiniteConfig.baseURL + url + '=' + nextLimit];
            }
        }, 
    function (newElements, data, url) {

        var elemWidth = $('#itemListPrimary .itemContainer').width(),
            $newElems = $( newElements ).css({ opacity: 0 , width: elemWidth});
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true ); 
        });
    });

    $(window).unbind('.infscr');
    _btnNext.click(function(){
        _divNext.css('display','none');
        _btnLoading.css('display','block');
        $container.infinitescroll('retrieve');
    return false;});
}(jQuery);

再次感谢。

Answer 1

看到我知道痛苦无限卷轴有多少，这就是我绕过这个的方式。

我在newElements函数中按类过滤了项目，如下所示。

function (newElements, data, url) {

                            var elemWidth = $('#itemListPrimary .itemContainer').width(),
                            $newElems = $( newElements ).css({ opacity: 0 , width: elemWidth});

                            $newElems.imagesLoaded(function(){

                                // show new elements
                                $newElems.animate({ opacity: 1 });
                                $container.masonry( 'appended', $newElems, true );

                                var children = $newElems.children();

                                // if filter is empty select all elements
                                if (!window.data) {
                                    console.log("nothing selected");
                                }
                                // if filter is selected filter elements
                                else {
                                   for (var i = 0; i < children.length; i++) {
                                       if ($(this).hasClass(window.data)) {
                                           $('.itemContainer').show();
                                       } else {
                                           $('.itemContainer').not('.' + window.data).hide();
                                       }
                                       // append layout
                                       $(window).bind('resize.masonry orientationchange.masonry').trigger('resize.masonry');
                                       };
                                    };
                                });
                            });

使用无限滚动

1 个答案: