Isotope.js - AJAX und Behälterhöhe

Question

ich auf einer Website arbeite, die Isotope.js ein Portfolio sortieren verwendet. Es gibt auch eine Schaltfläche, mit der Benutzer auf AJAX klicken können, um weitere Posts zu laden. Hier

ist ein Link auf die temporäre Website: https://contactlenzes.com. Diese

ist, wie ich begonnen Isotope.js:

// 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; 
    }); 

}); 

Und das ist meine AJAX-Datei:

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; 

} 


}); 

Hier ist das Problem!

Das Skript die die Pfosten Lasten. Aber wenn die Posts geladen werden, berechnet Isotope.js die Höhe des Containers nicht neu.

Wie man hier beobachten kann:

Und hier:

den Filter-Taste drücken, wird das Problem behoben.

So wie kann ich zwingen Isotope.js die Höhe des Behälters neu berechnet, wenn neue Beiträge per AJAX hinzugefügt werden?

oder replizieren die Wirkung Drücken der Filter hat ...?

Ich hoffe, dass ich Sinn mache.

Vielen Dank für Ihre Zeit!

Answer 1

Falls jemand über dieses Problem stolpert.

Ich brauchte die $content.isotope('layout'); einmal Bilder geladen haben zu wickeln, wie zum Beispiel: https://imagesloaded.desandro.com/

:

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

Weitere Informationen finden Sie hier