title: Isotope.js - AJAX and container height
body: <p>I am working on a website that uses Isotope.js to sort a portfolio.  There is also a button that users can click to AJAX load more posts.</p>
  
  <p>Here is a link to the temporary website:  <a href="https://contactlenzes.com" rel="nofollow noreferrer">https://contactlenzes.com</a>.</p>
  
  <p>This is how I initiated Isotope.js:</p>
  
  <pre><code>    // 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;
      });
  
  });
  </code></pre>
  
  <p>And this is my AJAX file:</p>
  
  <pre><code>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;
  
  }
  
  
  });
  </code></pre>
  
  <p>Here is the problem!</p>
  
  <p>The script the loads the posts.  But when the posts are loaded Isotope.js does not recalculated the height of the container.</p>
  
  <p>As you can observe here:</p>
  
  <p><a href="https://i.stack.imgur.com/tQhJV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tQhJV.jpg" alt="Isotope.js screenshot"></a></p>
  
  <p>And here:</p>
  
  <p><a href="https://i.stack.imgur.com/QYzbc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QYzbc.png" alt="Inspector"></a></p>
  
  <p>Pressing the filter button, fixes the issue.</p>
  
  <p>So how can I force Isotope.js to recalculated the height of the container when new posts are added via AJAX?</p>
  
  <p>Or replicate the effect pressing the filter has... ?</p>
  
  <p>I hope I am making sense.</p>
  
  <p>Thank you for your time!</p>