masonry imagesloaded infinite-scroll

Question

i have a problem with masonry imagesloaded infinite-scroll, on first load all works fine, but after infinite-scroll masonry calc wrong position

$(function(){
var $grid = $('.promos-get').masonry({
    itemSelector: 'none',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    stagger: 30,
    visibleStyle: { transform: 'translateY(0)', opacity: 1 },
    hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
});

var msnry = $grid.data('masonry');

$grid.imagesLoaded( function() {
    $grid.masonry( 'option', { itemSelector: '.grid-item' });
    var $items = $grid.find('.grid-item');
    $grid.masonry( 'appended', $items );
});

$grid.infiniteScroll({
    path: '.pagination .next-page a',
    append: '.grid-item',
    outlayer: msnry,
    history: false
});
})

my img tag don't has 'height, width' because my page is responsive. How i can fix imagesloaded? Help me plese.

Answer 1

I fix that, my solution is to remove the infiniteScroll and append new items on button click