Rails Masonry elements overlapping after an AJAX call

Question

My masonry transitions works well on first load.

However, when I make an AJAX call to retrieve new items, the old elements remains the same position, but the new items are aligned vertically from top to bottom.

It works well on the first load.

After an AJAX call, the new items are aligned vertically

my index.html.haml

.masonry-container.transitions-enabled
   = render 'masonry_container', items: @items

_masonry_container.html.haml

- items.each do |item|
  #i guess the code here is not important as i generate each image box succesfully

index.js.erb

$(".masonry-container").imagesLoaded(function(){
    $(".masonry-container").append("<%= j render 'masonry_container', 
    items: @items %>").masonry('appended', "<%= j render 
    'masonry_container', items: @items %>", 'reloadItems');
    });

Would appreciate if you could offer some helps.

Answer 1

Because things are changing and Masonry doesn't know about it, you probably need to have it run again after the changes.

https://masonry.desandro.com/methods.html#layout-masonry

Lays out all item elements. layout is useful when an item has changed size, and all items need to be laid out again.

But maybe you want to have Masonry be part of the process, so it has full knowledge of what's happening, instead of forcing it: https://masonry.desandro.com/methods.html#adding-removing-items