Jetpack Infinite Scroll, Isotope and ImagesLoaded

I'm trying to build grid with Infinite scroll and Isotope. I'm using also ImagesLoaded plugin for images which overlaps each other. The problem is I still get images overlap even that I triggered ImagesLoaded for Isotope init and before Isotope relayout. Here is my JavaScript code:

jQuery(document).ready(function($){
    //var $ = jQuery;
    // init Isotope
    var $grid = $('#grid');
    $grid.imagesLoaded().done( function() {
        $grid.isotope({
            itemSelector: '.element-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
                columnWidth: '.grid-element-sizer',
            }
        });
    });

    // bind filter button click
    $('.filters-button-group').on( 'click', 'button', function() {
        var filterValue = $( this ).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
        });
    });
});

jQuery(document).ready(function($){
    infinite_count = 0;
    // Triggers re-layout on infinite scroll
    $( document.body ).on( 'post-load', function () {
        infinite_count = infinite_count + 1;
        var $container = $('#grid');
        var $selector = $('#infinite-view-' + infinite_count);
        var $elements = $selector.find('.hentry');
        $elements.hide();

        $container.imagesLoaded().done( function(){
            $container.append( $elements ).isotope( 'appended', $elements );
            $elements.fadeIn();
            //$container.isotope('reloadItems')
        });


    });
});

Where can be my mistake on this? After I trigger Isotope filtering or resize browser window, everything is fixed.