使用无限滚动过滤项目

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');
                                       };
                                    };
                                });
                            });