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

Question

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

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

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

如何使Isotope参与,以便当我导航到选项卡时,它已经格式化并正确显示？

Answer 1

您可以使用shows.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');
});