Isotope.js - AJAXとコンテナの高さ

Question

私は、Isotope.jsを使ってポートフォリオを並べ替えるウェブサイトを作っています。ユーザーがAJAXをクリックしてより多くの記事を読み込むことができるボタンもあります。

ここに一時的なウェブサイトへのリンク：https://contactlenzes.comがあります。

// Portfolio isotope filter 
$(window).load(function() { 
    var $container = $('.projects'); 
    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     } 
    }); 
    $('.taxonomies a').click(function() { 
     $('.taxonomies .active').removeClass('active'); 
     $(this).addClass('active'); 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }); 
     return false; 
    }); 

}); 

そして、これは私のAJAXファイルです：

は、これは私がIsotope.jsを開始する方法です

ここ

jQuery(function($){ 


var $content = $('.projects'); 
var $loader = $('#more_posts'); 
var ppp = 4; 
var offset = $('.projects').find('.project').length; 

$loader.on('click', load_ajax_posts); 

function load_ajax_posts() { 
    if (!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))) { 
     $.ajax({ 
      type: 'POST', 
      dataType: 'html', 
      url: screenReaderText.ajaxurl, 
      data: { 
       'ppp': ppp, 
       'offset': offset, 
       'action': 'mytheme_more_post_ajax' 
      }, 
      beforeSend : function() { 
       $loader.addClass('post_loading_loader').html(screenReaderText.loading); 
      }, 
      success: function (data) { 
       var $data = $(data); 
       if ($data.length) { 
        var $newElements = $data.css({ opacity: 0 }); 



        $content.append($newElements); 

        $content.isotope('appended', $newElements); 

        $content.isotope('reloadItems'); // https://isotope.metafizzy.co/methods.html#reloaditems 

        $content.isotope('layout'); // https://isotope.metafizzy.co/methods.html#layout 


        $newElements.animate({ opacity: 1 }); 

        $loader.removeClass('post_loading_loader').html(screenReaderText.loadmore); 

       } else { 

        $loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(screenReaderText.noposts); 

       } 
      }, 
      error : function (jqXHR, textStatus, errorThrown) { 
       $loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown); 
       console.log(jqXHR); 
      }, 
     }); 
    } 

    offset += ppp; 
    return false; 

} 


}); 

が問題です！

スクリプトが投稿を読み込みます。しかし、ポストが読み込まれると、Isotope.jsはコンテナの高さを再計算しません。

そしてここに：あなたがここに観察することができたよう

フィルタ]ボタンを押すと

は、問題を修正します。

AJAXで新しい投稿が追加されたときに、Isotope.jsがコンテナの高さを再計算するように強制するにはどうすればよいですか？

フィルターを押してエフェクトを複製するか、または...？

私は理に適っていると思います。

ありがとうございました！

Answer 1

誰かがこの問題に遭遇した場合。

画像のような、ロードした後、私は$content.isotope('layout');をラップするために必要な：

$newElements.imagesLoaded(function(){ 
$content.isotope('layout'); 
}); 

詳細情報はここで見つけることができます： https://imagesloaded.desandro.com/