jQuery 同位素：無限滾動和過濾

Question

我有一個使用同位素插件設置的產品網格，產品分頁並使用無限滾動插件加載到滾動條上。 這很好用，但是由於產品太多，我們還添加了許多過濾器，這個過濾器再次工作得很好，但是當與無限滾動結合使用時，我遇到了一些問題，當我啟動過濾器時，如果結果是不在第一頁上，那么您必須等待所有頁面加載完畢，然后才能顯示任何結果。
所以我的問題是，是否有更復雜的方法來結合同位素過濾和無限滾動？ 我的標記如下：

$(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;
}); 
    });            

});   
});

Answer 2

顯然，使用帶有分頁擴展（25 美元）的數據集 API 的MixItUp（非商業免費）可以做到這一點。

另見： https : //github.com/patrickkunka/mixitup/

在撰寫本文時，該存儲庫的最新更新是 2018 年 10 月 1 日，GitHub 存儲庫中有相當多的未解決問題。 可悲的是似乎維護得不是很好。