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

Question

根据this JSFiddle，我创建了一个包含我的每个元素的Isotope容器，点击其中一个链接（左下角）我想重新排序元素，将匹配的元素拉到容器的左边。

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

Answer 1

解决了它：

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

要不就：

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

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

Answer 2

在向网格添加新项目之后，您需要将它们添加到istope但是如果您直接添加它们，即如果项目包含图像但仍未加载，那么布局将不正确，因此您需要使用imageLoaded插件并在其中执行此操作如下

    var $items = $(response).find('.grid-item');
            $container.append($items); //add items to grid
            $container.imagesLoaded(function(){


                     //add items to isotope once there images has been loaded
                $container.isotope( 'appended', $items );


            });