javascript - 如何在重新排序 DOM 时重绘和重新组织 Isotope 容器中的元素？

Question

根据这个 JSFiddle，我创建了一个包含我的每个元素的同位素容器，单击其中一个链接（左下角）后，我想重新排序元素，将匹配的元素拉到容器的左侧。

我通过将它们从 DOM 中删除并将它们移动到包含 div 的顶部来做到这一点。如果您检查浏览器的控制台，您会看到这成功发生了，但是对 Isotope（重绘）的以下调用会触发回调，但似乎不会触发实际的重绘。不完全确定为什么会这样，有人能解释一下吗？

Answer 1

解决了它：

$('#products').isotope( 'reloadItems' ).isotope( { sortBy: 'original-order' } );

要不就：

$('#products').isotope( 'reloadItems' ).isotope();

仍然不确定为什么 reLayout 不会触发此行为。

Answer 2

将新项目添加到网格后，您需要将它们添加到 Isotope，但如果您直接添加它们（即，如果项目包含图像但仍未加载），则布局将不正确。

你需要imageLoaded像这样使用：

var $items = $(response).find('.grid-item');
$container.append($items);                    //add items to grid
$container.imagesLoaded(function(){
  $container.isotope( 'appended', $items );   //add items to isotope after images are loaded
});