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');

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

如果我使用前置，则图像会按预期放置在元素的顶部，但是我会留下大量空白区域，其中包含已删除的项目。

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

所以：

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

谢谢

Answer 1

遇到同样的问题，并在此处看到了相关问题https://github.com/desandro/masonry/issues/381：

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

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

Answer 2

新版本解决了这个问题。以下代码片段为我工作（我使用的是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方法会在页面底部附加新项目。

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

2 个答案: