在AJAX通话后，Rails砌体元素重叠

Question

我的砌体过渡在首次加载时效果很好。

但是，当我进行AJAX调用以检索新项目时，旧元素保持相同的位置，但新项目从上到下垂直对齐。

在首次加载时效果很好。

在AJAX调用之后，新项目将垂直对齐

我的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');
    });

如果您能提供一些帮助，我们将不胜感激。

Answer 1

因为事情正在发生变化而且Masonry对此并不了解，所以你可能需要让它在变化后再次运行。

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

  

布置所有项目元素。当项目的大小发生变化时，布局非常有用，并且所有项目都需要重新布局。

但也许你想让砌体成为这个过程的一部分，所以它完全了解发生了什么，而不是强迫它： https://masonry.desandro.com/methods.html#adding-removing-items