title: Using Isotope with imagesLoaded for Ajax loaded content
body: <p>I'm using Isotope to create a masonry grid and I've implemented a load more button that fetches more items when clicked with AJAX.</p>
  
  <p>In my AJAX success function I create the needed html for the grid item like so:</p>
  
  <pre><code> htm = '';
   htm+= '&lt;div class="item"&gt;';
   htm+= '&lt;img src="' + imgSrc  + '"&gt;';
   htm+= '&lt;/div&gt;';
  </code></pre>
  
  <p>And after that I append the element to a container and call a redo_isotope function</p>
  
  <pre><code>$container.append(htm);
  redo_isotope()
  </code></pre>
  
  <p>My redo_isotope function:</p>
  
  <pre><code>  var $container = $('.grid');
    function redo_isotope(){
       $container.imagesLoaded( function(){
         $container.isotope({
           itemSelector: '.grid-item',
           transitionDuration:0,
           masonry: {
            gutter:15
           },
         });
       });
      $container.isotope().isotope('reloadItems');
    }
  </code></pre>
  
  <p>In most of the cases this makes the newly appended items layout nicely on the page without causing any overlapping issues, but in some of the cases the imagesLoaded function doesn't seem to fire properly causing the height of the appended items to be miscalculated and cut off. </p>
  
  <p>Has anyone experienced a similar problem and in that case how did you solve it?</p>