Overlapping Isotope images when adding images

I have been struggling to get Isotope 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 frequent problem 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.

Here is the relevant code:

// Get more images and add them to the galleryContainer
function getMoreImages() {
  for (var i = 0; i < 3; i++) {
    var newImage = $('<div class="objects"></div>');
    var x = Math.floor((Math.random() * 750) + 750);
    var y = Math.floor((Math.random() * 750) + 750);      

    newImage.append($('<img width="750" src="http://lorempixel.com/' + x + '/' + y + '">'));
    $container.append(newImage).imagesLoaded(function() {
      $container.isotope('appended', newImage);
    });
  }
}

Here is a (JSFiddle)[http://ift.tt/1tBbNHi] demonstrating my problem.

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.

Thanks =)