Rails Masonry 元素在 AJAX 调用后重叠答案

【问题标题】：Rails Masonry elements overlapping after an AJAX callRails Masonry 元素在 AJAX 调用后重叠
【发布时间】：2023-03-15 04:47:01
【问题描述】：

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

但是，当我进行 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');
    });

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

【问题讨论】：

标签： ruby-on-rails ajax masonry

【解决方案1】：

由于事情正在发生变化，而 Masonry 对此一无所知，因此您可能需要在更改后再次运行它。

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

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

但也许您希望 Masonry 成为流程的一部分，因此它对正在发生的事情有充分的了解，而不是强迫它： https://masonry.desandro.com/methods.html#adding-removing-items

【讨论】：