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


            });

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

2 个答案: