砌體佈局問題後刪除附加項目

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()來插入新項目 - 應用了佈局，但容器的高度變得不一致，並且一些項目與容器的底部重疊。

所以：

1. 如何刪除項目和清理佈局
2. 我如何添加新的項目，並清理佈局

感謝

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方法將在頁面底部附加新項目。