添加Masonry库

Masonry不需要 jQuery 。但是因为Bootstrap的JavaScript组件已经在使用jQuery，以jQuery的方式初始化Masonry我将会使我自己的生活更加美好。

这是我们用jQuery和imagesLoaded初始化Masonry需要的代码段。

上面的代码将包裹所有网格项目的 div 存储在一个叫 $container 的变量中。

接下来，Masonry在 $container 上用两个推荐选项进行初始化。 columnWidth 选项表明一个水平网格的一列的宽度。在这里是通过用单个网格项目的类名来设置单个网格项目的宽度的。 itemSelector 选项表明哪个子元素被用作项目元素。在这里，也设定为单个网格项目。

现在是时候来测试代码了。

哎呀！隐藏的面板怎么了？

在一个不使用Bootstrap选项卡的网页上，上面的代码就像施了魔法。然而，在这种情况下，你很快就会发现一种有趣的行为出现。

首先，它看起来不错，因为默认显示的选项卡面板内的网格是显示正确的：

但是，如果你点击选项卡导航链接显示隐藏的面板的内容，就会发生下面的情况：

查看源码，Masonry已经如预期那样触发了，但是每个项目的位置没有被正确的计算：网格项目都像一副纸牌一样堆在一起。

这还不是全部。调整浏览器窗口的大小会使这些网格项目正确定位自己。

让我们来解决这个布局的错误

因为这个出乎意料的布局错误在点击选项卡的导航链接之后变得更明显，那么让我们更密切的观察Bootstrap选项卡触发的事件。

事件列表 非常的短。如下。

show.bs.tab 触发标签页显示，但是是在新的标签页显示之前 shown.bs.tab 触发标签页显示，在标签页显示之后 hide.bs.tab 在新的标签页将显示的时候触发(因此前一个显示的标签页将被隐藏) hidden.bs.tab 在一个新的标签页显示之后触发（因此前一个显示的标签页是隐藏的）

因为网格布局弄乱是在标签页已经被显示之后，所以我们去找 shown.bs.tab 事件。我们将这里的代码放置到我们原先代码的下面：

上面的代码中发生了什么：

jQuery .each() 函数循环遍历每个选项卡导航链接，监听shown.bs.tab事件。在这个事件触发时，对应的面板变成可见的，同时Masonry在所有的图片完成加载后重新初始化。

让我们来测试代码

如果你一直跟着文章操作，直接在您的浏览器中启动您的示例页面，或者试试下面的CodePen示例来看看结果。