jQuery изотоп: бесконечный прокрутка и фильтрация

Question

У меня есть сетка продуктов, созданная с помощью изотопного плагина, продукты разбиты на страницы и загружены в свиток с помощью бесконечного плагина прокрутки. Это работает отлично, но поскольку есть так много продуктов, мы также добавили несколько фильтров, снова эти фильтры отлично работают, но в сочетании с бесконечной прокруткой я сталкиваюсь с некоторыми проблемами, например, когда я запускаю фильтр, если результаты не совпадают 't на первой странице, вам нужно дождаться загрузки всех страниц до того, как будут показаны какие-либо результаты.
Итак, мой вопрос: существует ли более сложный способ комбинирования изотопной фильтрации и бесконечного прокрутки? Моя разметка выглядит следующим образом:

$(window).load(function() { 

    var $container = $('.products-grid-wrap'); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.products-grid-block', 
      filter: '*:not(.hidden), .products-grid-block', 
      animationEngine: 'best-available', 
      layoutMode: "perfectMasonry", 
      perfectMasonry: { 
       columnWidth: 280, 
       rowHeight: 310 
      } 
     }); 

     $container.infinitescroll({ 
      navSelector: '#page_nav', // selector for the paged navigation 
      nextSelector: '#page_nav a', // selector for the NEXT link (to page 2) 
      itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve 
      pixelsFromNavToBottom: Math.round($(window).height() * 2.5), 
      bufferPx: Math.round($(window).height() * 2.5), 
      loading: { 
       finishedMsg: 'No more products to load.', 
       img: 'URL/wp-content/uploads/2014/11/ajax-loader-big.gif' 
      } 
     }, 
     // call Isotope as a callback 
     function (newElements) { 
      var $newElems = $(newElements); 
      $newElems.imagesLoaded(function() { 
       $container.isotope('insert', $newElems); 
       $('.products-grid-rollover-block').hide();     
       setTimeout(function() { 
        $('.products-grid-wrap').isotope('reLayout'); 
        //$('.products-grid-wrap').isotope({ 
        //sortBy: 'category', 
         //sortAscending: false }); 
       }, 500); 
      }); 
     });    

    }); 

    $('.products-header-category-select, #products-filter-all-categories').click(function() { 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector 
     }); 

     return false; 
    }); 

}); 

Любые предложения на это были бы очень признательны!

Answer 1

Вам нужно загрузить функцию фильтрации фильтра в функцию (newElements). Попробуйте следующее:

$(window).load(function() { 

var $container = $('.products-grid-wrap'); 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.products-grid-block', 
     filter: '*:not(.hidden), .products-grid-block', 
     animationEngine: 'best-available', 
     layoutMode: "perfectMasonry", 
     perfectMasonry: { 
      columnWidth: 280, 
      rowHeight: 310 
     } 
    }); 

    $container.infinitescroll({ 
     navSelector: '#page_nav', // selector for the paged navigation 
     nextSelector: '#page_nav a', // selector for the NEXT link (to page 2) 
     itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve 
     pixelsFromNavToBottom: Math.round($(window).height() * 2.5), 
     bufferPx: Math.round($(window).height() * 2.5), 
     loading: { 
      finishedMsg: 'No more products to load.', 
      img: 'URL/wp-content/uploads/2014/11/ajax-loader-big.gif' 
     } 
    }, 
    // call Isotope as a callback 
    function (newElements) { 
     var $newElems = $(newElements); 
     $newElems.imagesLoaded(function() { 
      $container.isotope('insert', $newElems); 
      $('.products-grid-rollover-block').hide();     
      setTimeout(function() { 
       $('.products-grid-wrap').isotope('reLayout'); 
       //$('.products-grid-wrap').isotope({ 
       //sortBy: 'category', 
        //sortAscending: false }); 
      }, 500); 
     }); 
    $('.products-header-category-select, #products-filter-all-categories').click(function() { 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ 
     filter: selector 
    }); 

    return false; 
}); 
    });    

}); 
});