移除然后附加项目后的砌体布局问题

Question

我正在使用 masonry.js 来查看画廊/专辑视图。

我已成功使用该脚本显示相册的缩略图。当用户单击缩略图时，我希望删除相册缩略图，然后将其替换为相册中图像的缩略图。

专辑图片通过ajax传递给脚本，为html格式

我可以使用此代码删除项目$container 是砌体容器的 jquery 对象：

var obj = $('.item');
$container.masonry('remove',obj);
$container.masonry('reloadItems');
$container.masonry('layout');

然后我使用此脚本附加新的缩略图 - data 是新元素的 html。

var $newItems = $(data);

$container.append($newItems).masonry('appended', $newItems);

$container.masonry('reloadItems');
$container.masonry('layout');

这会加载新的缩略图元素并组织布局。然而，由于附加，它将它们放置在已删除缩略图的底部。

如果我使用 prepend，图像会按预期放置在元素的顶部，但我会在已删除项目所在的位置留下大量空白。

我还尝试html() 插入新项目 - 应用了布局，但容器的高度变得不一致，并且一些项目与容器底部重叠。

所以：

1. 如何删除项目并清理布局
2. 如何添加新项目并清理布局

谢谢

Answer 1

遇到同样的问题，在这里看到了一个相关的问题https://github.com/desandro/masonry/issues/381：

$container.masonry('remove',obj);
$container.masonry();

这对我来说似乎更好一些。

Answer 2

这个问题在新版本中得到解决。以下代码 sn-p 对我有用（我使用的是 Masonry 版本 4.1.1）。

var $newItems = $(data);
var $obj = $('.item');

$grid.masonry( 'remove', $obj);
$grid.append($newItems);
$grid.masonry( 'appended', $newItems ).masonry('layout');

即使在这里，调用layout 方法也是强制性的。不调用layout 方法将在页面底部追加新项目。