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

显然 MixItUp（非商业免费）using the Dataset API 和 Pagination extension ($25) 可以做到这一点。

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

截至撰写本文时，该存储库的最新更新是 2018 年 10 月 1 日，GitHub 存储库中有相当多的未解决问题。遗憾的是，似乎维护得不是很好。

jQuery同位素：无限滚动和过滤

2 个答案: