Фильтрация элементов с помощью бесконечной прокрутки

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