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

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