Question

我使用无限滚动和过滤构建了jQuery Masonry布局。

我的问题是，在滚动前点击过滤器时，不会过滤加载无限滚动的内容。

有没有办法解决它？

以下是检查的链接：http://www.jcvergara.com/working/

以下是完整的砌体代码：

$(document).ready(function(){
    var $container = $('.container');
    // initialize
    $container.masonry({
      columnWidth: 250,
      itemSelector: '.item',
      isFitWidth: true
    });
    $container.masonry( 'on', 'layoutComplete', function() {
        $('.right-line').css('height', $('.container').height());
    });
    $('.right-line').css('height', $('.container').height());


    // infinite scroll
    var $container = $('#content');
    $container.infinitescroll({ 
        navSelector  : "nav.posts-navigation",            
        nextSelector : "div.nav-previous a:first",    
        itemSelector : "#content div.item",       
        },
        // trigger Masonry as a callback
        function( newElements ) {
            var $newElems = $( newElements );
            $container.masonry( 'appended', $newElems );

            // open posts in ajax
            $('.post-link').click(function(){
            $('.openarticle').css('display', 'block');
            var post_link = $(this).attr('href');

            $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
            $('#openthis').load(post_link);
            $('<a></a>', {
                text: 'Close',
                class: 'close',
                id: 'close',
                href: '#'
            })
                .prependTo($('.openarticle .main'))
                .click(function() {
                        $('.openarticle').css('display', 'none');
                        $('#close').remove();
                    });
            return false; 
            }); 
        }
    );

    // filtering        
    $(".cat-item a").click(function(e) {
        e.preventDefault(); 
        var cut_url = "http://www.jcvergara.com/category/";
        var group = $(this).attr('href');       
        group = group.replace(cut_url, '').slice(0,-1);
        var group_class = "." + group;
        $(".cat-item a.active").removeClass('active');
        $(this).addClass('active');         
        if(group != "all") {
            $(".item").hide();
            $(group_class).show();
            $container.masonry();
        } else {
            $(".item").show();
            $container.masonry();
        }
    });
});

Answer 1

尝试使用“on”作为点击功能：

// filtering        
   $(".cat-item a").on( "click",function (e) {
    e.preventDefault(); 
    var cut_url = "http://www.jcvergara.com/category/";
    var group = $(this).attr('href');       
    group = group.replace(cut_url, '').slice(0,-1);
    var group_class = "." + group;
    $(".cat-item a.active").removeClass('active');
    $(this).addClass('active');         
    if(group != "all") {
        $(".item").hide();
        $(group_class).show();
        $container.masonry();
    } else {
        $(".item").show();
        $container.masonry();
    }
  });

砌体过滤器+无限滚动问题

1 个答案: