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

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!