jquery - 如何在同位素中使用动态容器？

Question

在 Web 应用程序的不同部分重新使用 Isotope 容器的上下文中，我需要调整容器的大小。但是，在为小型布局添加和删除 CSS 类之后，容器不再占用全部空间。

参见 JSFiddle:http://jsfiddle.net/mulderp/ptLzx/5/

$container.addClass('small');

这会按预期调整容器的大小。

 $container.removeClass('small');
 $container.isotope('shuffle');

预计会取回原来的容器。这是行不通的。

关于如何使设置正常工作的任何线索？

Answer 1

这看起来像是一个时间问题，这在 Isotope 中经常发生。

如果您在 shuffle 方法周围放置一个 1000 毫秒的 setTimeout()，它会起作用 - 因此确认问题...

$('#large').click(function(){
    $container.removeClass('small');
    var timer = setTimeout(function(){
        $container.isotope('shuffle');      
    },1000);
});

超时一点也不理想，但它确实说明 Isotope 需要完成才能更新。我建议您使用不同的计时器进行测试，直到找到合适的计时器。

我还建议使用 $container.isotope('reLayout') 而不是 $container.isotope('shuffle') 除非你特别需要随机排列元素，该方法就是为执行此操作而创建的。