接下来，Masonry在 $container 上用两个推荐选项进行初始化。 columnWidth 选项表明一个水平网格的一列的宽度。在这里是通过用单个网格项目的类名来设置单个网格项目的宽度的。 itemSelector 选项表明哪个子元素被用作项目元素。在这里，也设定为单个网格项目。
现在是时候来测试代码了。
哎呀！隐藏的面板怎么了？
在一个不使用Bootstrap选项卡的网页上，上面的代码就像施了魔法。然而，在这种情况下，你很快就会发现一种有趣的行为出现。
首先，它看起来不错，因为默认显示的选项卡面板内的网格是显示正确的：
但是，如果你点击选项卡导航链接显示隐藏的面板的内容，就会发生下面的情况：
查看源码，Masonry已经如预期那样触发了，但是每个项目的位置没有被正确的计算：网格项目都像一副纸牌一样堆在一起。
这还不是全部。调整浏览器窗口的大小会使这些网格项目正确定位自己。
让我们来解决这个布局的错误
因为这个出乎意料的布局错误在点击选项卡的导航链接之后变得更明显，那么让我们更密切的观察Bootstrap选项卡触发的事件。
事件列表 非常的短。如下。
show.bs.tab 触发标签页显示，但是是在新的标签页显示之前
shown.bs.tab 触发标签页显示，在标签页显示之后
hide.bs.tab 在新的标签页将显示的时候触发(因此前一个显示的标签页将被隐藏)
hidden.bs.tab 在一个新的标签页显示之后触发（因此前一个显示的标签页是隐藏的）
因为网格布局弄乱是在标签页已经被显示之后，所以我们去找 shown.bs.tab 事件。我们将这里的代码放置到我们原先代码的下面：
$('a[data-toggle=tab]').each(function () { var $this = $(this); $this.on('shown.bs.tab', function () { $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', itemSelector: '.item' }); }); }); });
上面的代码中发生了什么：
jQuery .each() 函数循环遍历每个选项卡导航链接，监听shown.bs.tab事件。在这个事件触发时，对应的面板变成可见的，同时Masonry在所有的图片完成加载后重新初始化。
让我们来测试代码
如果你一直跟着文章操作，直接在您的浏览器中启动您的示例页面，或者试试下面的CodePen示例来看看结果。
你可能也想看一下 完整的示例页面 来测试响应式布局效果。
点击选项卡导航链接，注意这个时候网格项目如何在每个面板中适合均匀。改变浏览器的大小会导致网格项目正确的重新定位自己的位置，并有一个漂亮的动画效果。
就是这样，任务完成！
结论
在这篇文章中我已经展示了如何整合Bootstrap的标签页和Masonry JavaScript库。
这两个脚本都容易使用并且非常强大。然而，将它们两个放到一起你将会面临一些影响隐藏的选项卡的布局漏洞。如上面所示，诀窍就是在每个面板变成可见之后重新初始化Masonry库。
您可能感兴趣的文章: