Bootstrap的選項卡組件包括兩個關鍵點：選項卡導航元素和一些內(nèi)容面板。在頁面加載時，第一個面板應用了 .active 類。使這個面板默認是可見的。這個類是通過使用JavaScript來切換面板的可見性,通過選項卡導航觸發(fā)的事件：如果這個面板現(xiàn)在擁有 .active 類那它是可見的，否則這個面板就是隱藏的。

如果你有一些網(wǎng)頁內(nèi)容最好是在單獨的塊中而不是擠在一個地方，那這種選項卡組件可能派上用場。

為什么是Maronry?

在一些情況下，在每個面板內(nèi)的內(nèi)容是適合被顯示在響應式的網(wǎng)格布局內(nèi)的。例如，一系列的商品，服務和文件夾項目都是可以被顯示在網(wǎng)格格式內(nèi)的內(nèi)容類型。

然而，如果網(wǎng)格的格子不是相同的高度，那像如你所看到的下面的情況將會發(fā)生。

兩行之間被一些大的間距撐開，使布局看上去好難看。

這就是Masonry解決問題的時候了。加一些Masonry功能到這個混亂的布局中，然后你的布局會動態(tài)的適應屏幕的實際面積，消除所有損壞布局的空白間距。

設置DEMO頁面

制作一個示例頁面用來展示如何整合Bootstrap的標簽頁和Masonry并不像期望的那么簡單。

本文的演示案例是基于在Bootstrap網(wǎng)站上可用的起始模板制作的

每個在選項卡面板中的網(wǎng)格項目都是用 Bootstrap的網(wǎng)格系統(tǒng) 和縮略圖組件建立的。這里是一個代碼片段來解釋它的結構：

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://lorempixel.com/200/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
<a href="#" class="btn btn-primary" role="button">Button</a> 
<a href="#" class="btn btn-default" role="button">Button</a>
</p>
</div>
</div>
</div> 
<!-- Repeat two more times ... -->

上面的代碼創(chuàng)建了一個在大型屏幕上為三列，在小型屏幕上為兩列的網(wǎng)格。如果你需要復習一下Bootstrap的網(wǎng)格系統(tǒng)，Syed Fazle Rahman寫的理解Bootstrap的網(wǎng)格系統(tǒng)是一篇很好的文章。

示例頁面中的選項卡組件有如下的HTML結構：

<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#panel-1" aria-controls="panel-1" role="tab" data-toggle="tab">Panel 1</a>
</li>
<li role="presentation">
<a href="#panel-2" aria-controls="panel-2" role="tab" data-toggle="tab">Panel 2</a>
</li>
<li role="presentation">
<a href="#panel-3" aria-controls="panel-3" role="tab" data-toggle="tab">Panel 3</a>
</li>
<li role="presentation">
<a href="#panel-4" aria-controls="panel-4" role="tab" data-toggle="tab">Panel 4</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="panel-1">
<div class="row masonry-container">
<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>
<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>
<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>
...
</div><!--End masonry-container -->
</div><!--End panel-1 -->
<div role="tabpanel" class="tab-pane" id="panel-2">
<!-- Same as what goes inside panel-1 -->
</div><!--End panel-2 -->
...
</div><!--End tab-content -->
</div><!--End tabpanel -->

這里有一些關于上面代碼片段的注意事項：

HTML注釋指出了選項卡的關鍵部件： Nav tabs 標志選項卡的導航部分， Nav panels 標志著內(nèi)容面板。
選項卡的鏈接通過它們 href 屬性的值連接到相應的 id 屬性的值相同的內(nèi)容面板。例如，有著 href="#panel-1" 的鏈接打開有著 id=panel-1 的內(nèi)容面板。

在導航部分的每個錨標簽都包含 data-toggle="tab" .這個標記使選項卡組件工作而無需寫任何額外的JavaScript.
Masonry的目標元素需要有 .masonry-container 類，這個類適用于包含所有網(wǎng)格項目的包裝器 div 元素，還需要應用于每單個網(wǎng)格項目的 .item 類。

要看到Masonry庫的全部威力，一定要確保網(wǎng)格項目有不同的高度。例如，刪除一個項目的圖片，縮短另一個項目的段落，等等。

完整的代碼，請在CodePen中查看示例的代碼。

添加Masonry庫

你可以在 Masonry官網(wǎng) 上通點擊”Download“ 按鈕下載 masonry.pkgd.min.js 。

為了避免布局問題，庫的作者推薦將Masonry與imagesLoaded 插件一起使用。

Masonry不需要 jQuery 。但是因為Bootstrap的JavaScript組件已經(jīng)在使用jQuery，以jQuery的方式初始化Masonry我將會使我自己的生活更加美好。

這是我們用jQuery和imagesLoaded初始化Masonry需要的代碼段。

var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
}); 
});

上面的代碼將包裹所有網(wǎng)格項目的 div 存儲在一個叫 $container 的變量中。

接下來，Masonry在 $container 上用兩個推薦選項進行初始化。 columnWidth 選項表明一個水平網(wǎng)格的一列的寬度。在這里是通過用單個網(wǎng)格項目的類名來設置單個網(wǎng)格項目的寬度的。 itemSelector 選項表明哪個子元素被用作項目元素。在這里，也設定為單個網(wǎng)格項目。

現(xiàn)在是時候來測試代碼了。

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

在一個不使用Bootstrap選項卡的網(wǎng)頁上，上面的代碼就像施了魔法。然而，在這種情況下，你很快就會發(fā)現(xiàn)一種有趣的行為出現(xiàn)。

首先，它看起來不錯，因為默認顯示的選項卡面板內(nèi)的網(wǎng)格是顯示正確的：

但是，如果你點擊選項卡導航鏈接顯示隱藏的面板的內(nèi)容，就會發(fā)生下面的情況：

查看源碼，Masonry已經(jīng)如預期那樣觸發(fā)了，但是每個項目的位置沒有被正確的計算：網(wǎng)格項目都像一副紙牌一樣堆在一起。

這還不是全部。調(diào)整瀏覽器窗口的大小會使這些網(wǎng)格項目正確定位自己。

讓我們來解決這個布局的錯誤

因為這個出乎意料的布局錯誤在點擊選項卡的導航鏈接之后變得更明顯，那么讓我們更密切的觀察Bootstrap選項卡觸發(fā)的事件。

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

show.bs.tab 觸發(fā)標簽頁顯示，但是是在新的標簽頁顯示之前
shown.bs.tab 觸發(fā)標簽頁顯示，在標簽頁顯示之后
hide.bs.tab 在新的標簽頁將顯示的時候觸發(fā)(因此前一個顯示的標簽頁將被隱藏)
hidden.bs.tab 在一個新的標簽頁顯示之后觸發(fā)（因此前一個顯示的標簽頁是隱藏的）

因為網(wǎng)格布局弄亂是在標簽頁已經(jīng)被顯示之后，所以我們?nèi)フ?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'
}); 
}); 
});
});

上面的代碼中發(fā)生了什么：

jQuery .each() 函數(shù)循環(huán)遍歷每個選項卡導航鏈接，監(jiān)聽shown.bs.tab事件。在這個事件觸發(fā)時，對應的面板變成可見的，同時Masonry在所有的圖片完成加載后重新初始化。

讓我們來測試代碼

如果你一直跟著文章操作，直接在您的瀏覽器中啟動您的示例頁面，或者試試下面的CodePen示例來看看結果。

你可能也想看一下完整的示例頁面來測試響應式布局效果。

點擊選項卡導航鏈接，注意這個時候網(wǎng)格項目如何在每個面板中適合均勻。改變?yōu)g覽器的大小會導致網(wǎng)格項目正確的重新定位自己的位置，并有一個漂亮的動畫效果。

就是這樣，任務完成！

結論

在這篇文章中我已經(jīng)展示了如何整合Bootstrap的標簽頁和Masonry JavaScript庫。

這兩個腳本都容易使用并且非常強大。然而，將它們兩個放到一起你將會面臨一些影響隱藏的選項卡的布局漏洞。如上面所示，訣竅就是在每個面板變成可見之后重新初始化Masonry庫。

您可能感興趣的文章: