javascript - 使用 Ajax 进行同位素重新布局

Question

我在文档加载时有近 10 个不同的 AJAX 调用。当 AJAX 成功时，我尝试了 Isotope 的 insert() 和 reLayout() 函数，但我不能让它工作。我打开了 jsFiddle 但 AJAX 无法正常工作，因为它无法从外部访问。虽然您可以看到 AJAX 调用，但如果您能告诉我在这种情况下该怎么做，我会很高兴。

这是我在 #divMecraSatisDagilimi 中重复加载内容的 div 和 im 加载内容:

    <div class="rowPanel2 blue">
        <div class="rowCaption2">
            Mecra Satış Dağılımı
        </div>
    <div id="divMecraSatisDagilimi">    
    </div>
</div>

但我找不到将此 div 附加到 Isotope 的方法。

这是 jsFiddle link .

Answer 1

同位素是否已初始化？在容器上运行任何操作之前需要对其进行初始化

$container.isotope({
    itemSelector: '.rowPanel'
});

完成此操作后，由于据我所知您只是在编辑项目的内部，因此您无需调用用于插入新项目的 insert 函数，您确实应该在 ajax 调用中使用 reLayout 函数。

例如

$container =  $(".wallContent");

$container.isotope({
    itemSelector: '.rowPanel'
});

$.get("/service1", function(res){
   // Updating the content one of the rowPanel item
   $(".rowPanel:eq(0)").html(res);
   $container.isotope('reLayout');
});

$.get("/service2", function(res){
   // Updating the content another of the rowPanel item
   $(".rowPanel:eq(1)").html(res);
   $container.isotope('reLayout');
});

希望对您有所帮助!