title: Overlapping Isotope images when adding images
body: <p>I have been struggling to get <a href="http://isotope.metafizzy.co/" rel="nofollow">Isotope</a> to work. I have an application where after clicking a button I load some more images by getting their URLs from JSON. The issue I am having is that when I add the images to the 'galleryContainer' div (my div that I am holding all the images in) the images overlap. That or nothing happens and the whole page seems to freeze. Apparently this is a <a href="http://isotope.metafizzy.co/faq.html" rel="nofollow">frequent problem</a> but I still have not been able to get it working for my project. I try to use 'imagesLoaded' but it never seems to work for me.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>// Get more images and add them to the galleryContainer
  function getMoreImages() {
    for (var i = 0; i &lt; 3; i++) {
      var newImage = $('&lt;div class="objects"&gt;&lt;/div&gt;');
      var x = Math.floor((Math.random() * 750) + 750);
      var y = Math.floor((Math.random() * 750) + 750);      
  
      newImage.append($('&lt;img width="750" src="http://lorempixel.com/' + x + '/' + y + '"&gt;'));
      $container.append(newImage).imagesLoaded(function() {
        $container.isotope('appended', newImage);
      });
    }
  }
  </code></pre>
  
  <p>Here is a (JSFiddle)[<a href="http://codepen.io/dirtshell/pen/emdjGv]" rel="nofollow">http://codepen.io/dirtshell/pen/emdjGv]</a> demonstrating my problem. </p>
  
  <p>It is totally possible that I am simply making a simple mistake JS wise (like not using the imagesLoaded plugin correctly), since I am sort of new to it.</p>
  
  <p>Thanks =)</p>