Isotope not working with imagesLoaded?

Question

I\'m using jQuery Isotope to create a horizontal layout, aligning DIVs with 100% height next to each other and center images inside each DIV vertically. So for, I\'m calling

Answer 1

I also came over to the same problem recently and discovered that this is due to async calls. Your $container.imagesLoaded() function is called before the images loaded plugin is loaded.

You just need to wrap $container.imagesLoaded() into $(document).ready() and remove asyn attr from jquery script line.

Answer 2

You can also use this implementation, so instead of waiting for everything to load, you can show the images as they get loaded to the grid individually, the code would look something like this:

jQuery(document).ready(function(){

     // Initialize Isotope

     $('.grid').isotope({
        itemSelector: '.item',
        percentPosition: true,
     });

     // Refresh the layout of the grid each time an image gets loaded

     $('.grid').imagesLoadedMB().progress( function() {
        $('.grid').isotope('layout');
    });

});

I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can specify very easy the space between the items, number of columns on each resolution, and more, also it comes with the ability to add filters, sorting and a search filed, give it a try!