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

Question

我有一个带有 4 个选项卡的引导选项卡控件。我的同位素代码在第三个选项卡内。但是当我导航到该选项卡时，布局没有参与（所有图像都在自己的线上，而不是漂亮的平铺布局）。如果我调整页面大小，它将重新组织成正确的布局。

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

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

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

score 9 · Accepted Answer

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

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

此代码将为layout所有选项卡触发，因此您可以使用 e.target 检测选项卡，如果 e.target == 您的选项卡链接到同位素网格，则触发layout. 希望它是有道理的...

score 6 · Accepted Answer

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

2 回答 2