在Bootstrap选项卡中初始化jQuery Isotope布局

Question

我有一个带有4个标签的bootstrap标签控件。我的同位素代码在第3个标签内。但是当我导航到该选项卡时，布局没有被使用（所有图像都在他们自己的行上，而不是在漂亮的平铺布局中）。如果我调整页面大小，它将重新组织成适当的布局。

我在这里重新创建了这个问题。 http://jsfiddle.net/Vc6Vk/

<div class="tab-pane" id="messages">
   ....isotope code here
</div>

如何让Isotope参与进来，以便当我导航到标签时，它已经格式化并正确显示？

Answer 1

您可以使用事件shown.bs.tab：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $container.isotope('layout');
});

此代码将触发所有标签的layout，因此您可以使用e.target检测标签，如果e.target ==您的标签链接到同位素网格，则触发layout。希望它有意义......

http://jsfiddle.net/Vc6Vk/1/

Answer 2

Karine的答案很棒，但在最新版本中可能不起作用，因为“reLayout”方法已重命名为“layout”。

所以而不是

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.grid').isotope('reLayout');
});

请使用

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.grid').isotope('layout');
});