Packery and imagesLoaded plugin not working?

Question

I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below:

$(document).ready(function() {
var $container = $container.packery({
   itemSelector: "packery-item"
});
$container.imagesLoaded( function() {
   container.packery();
});
});

Any help would be greatly appreciated.

EDIT: The html code looks like this:

<div class="packery js-packery">

<div class="packery-item item"><img src="imgs/cdg5.jpg"></img></div>
<div class="packery-item text"><img src="imgs/text1.png"></img></div>
<div class="packery-item item w2"><img src="imgs/cdg3.jpg"></img></div>
<div class="packery-item gif"><img src="imgs/gif1.gif"></img></div>

</div>

etc.

Answer 1

The problem is that packery is executed before the images in your items are loaded. Because of that Packery can not know how high the element will have to be.

A solution for this is to check with jquery if all images are loaded and then execute Packery. I have found several ways to do this, the solution here seems like a good one.

Another way to fix this is to give the images a fixed height in css or with an height attribute. However, you can only do this when the images have the same height or when you know the height in advance.

Update: This is an example code for the first solution:

$(document).ready(function(){

    var cnt = $("img").length;
    $("img").one("load", function() {
        cnt--;

        // If all images are loaded, init Packery
        if (cnt === 0)
        {
            $(".js-packery").packery({
               itemSelector: "packery-item"
            });
        }

    }).each(function() {
      if(this.complete) $(this).load();
    });

});