The perfect combination of the Bootstrap tab and the Masonry plug-in, bootstrapmasonry

The perfect combination of the Bootstrap tab and the Masonry plug-in, bootstrapmasonry

Bootstrap is one of the most popular front-end frameworks. Using Bootstrap in your project allows you to quickly implement responsive web pages.

If you try to use the tab component of one of the many JavaScript components provided by Masonry and Bootstrap, you will find a lot of annoying behavior.

I have met, and this article focuses on what this problem is and how you can solve it.

Bootstrap Tabs

The tab component of Bootstrap includes two key points: tab navigation elements and some content panels. The. active class is applied to the first panel during page loading. Make this panel visible by default. This class uses JavaScript to switch the visibility of the Panel. events triggered by tab navigation are: if the Panel now has the. active class, it is visible; otherwise, the Panel is hidden.

If you have some webpage content that is best placed in a separate block instead of a place, this tab component may be useful.

Why is it Maronry?

In some cases, content in each panel is suitable for display in a responsive grid layout. For example, a series of products, services, and folder items are content types that can be displayed in the grid format.

However, if the grid is not of the same height, it will happen as you can see below.

 

The two rows are opened by some large spacing, making the layout look ugly.

This is the time for Masonry to solve the problem. Add some Masonry functions to this messy layout, and then your layout will dynamically adapt to the actual area of the screen, eliminating the blank spaces of all damaged la S.

 

Set DEMO page

Create an Example page to show how to integrate the Bootstrap tab and Masonry is not as simple as expected.

This example is based on the starting Template available on the Bootstrap website.

Each grid project in the tab panel is created using the Bootstrap grid system and thumbnail components. Here is a code snippet to explain its structure:

<div class="col-sm-6 col-md-4"><div class="thumbnail"><div class="caption">
The code above creates a grid with three columns on a large screen and two columns on a small screen. If you need to review the Bootstrap grid system, it is a good article to understand the Bootstrap grid system written by Syed Fazle Rahman.
The tab components on the sample page have the following HTML structure:
<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 -->
Here are some precautions for the above code snippets:
The HTML comment specifies the key part of the tab: the navigation part of the Nav tabs flag tab, and the Nav panels marks the content panel.
The link of the tab is connected to the content panel with the same value of the corresponding id attribute through the values of their href attribute. For example, the link with href = "# panel-1" opens the content panel with id = panel-1.

Each anchor tag in the navigation section contains data-toggle = "tab". This tag allows the tab component to work without writing any additional JavaScript.
The target element of Masonry must have the. masonry-container class. This class applies to the. item class that contains all grid project wrapper div elements and must be applied to each grid project.

To see the full power of the Masonry library, make sure that the grid project has different heights. For example, you can delete an image of a project, shorten the paragraph of another project, and so on.
Complete code. Check the sample code in CodePen.
Add a Masonry Library
On the Masonry official website, you can click "Download" to Download masonry. pkgd. min. js.
To avoid layout problems, the author of the library recommends using the Masonry and imagesLoaded plug-ins together.
Masonry does not require jQuery. However, because the JavaScript component of Bootstrap is already using jQuery, initializing Masonry in jQuery will make my own life better.
This is the code segment we need to use jQuery and imagesLoaded to initialize Masonry.
var $container = $('.masonry-container');$container.imagesLoaded( function () {$container.masonry({columnWidth: '.item',itemSelector: '.item'}); });
The code above stores the div that wraps all grid projects in a variable named $ container.
Next, Masonry initializes with two recommended options on $ iner. The columnWidth option indicates the width of a column in a horizontal grid. Here, the class name of a single grid project is used to set the width of a single grid project. The itemSelector option indicates which child element is used as a project element. Here, it is also set to a single grid project.
Now it is time to test the code.
Oh! What happened to the hidden panel?
On a webpage that does not use the Bootstrap tab, the above Code is like magic. However, in this case, you will soon find an interesting behavior.
First, it looks good, because the grid in the tab panel displayed by default is displayed correctly:
 
However, if you click the tab navigation link to display the hidden panel content, the following will happen:
 
Check the source code. Masonry has been triggered as expected, but the position of each project is not properly calculated: the grid projects are stacked together like a card.
This is not all. Adjusting the size of the browser window will make these grid projects locate themselves correctly.
Let's solve this layout error.
Because this unexpected layout error becomes more obvious after clicking the navigation link of the tab, we can observe the events triggered by the Bootstrap tab more closely.
The event list is very short. As follows.
Show. bs. tab trigger tab display, but before new tab display
Shown. bs. tab trigger tab display, after tab display
Hide. bs. tab is triggered when the new tab is displayed (so the previous tab is hidden)
Hidden. bs. tab is triggered after a new tab is displayed (so the previous tab is hidden)
Because the grid layout is messy after the tab is displayed, we will go to the shown. bs. tab event. We place the code here below the original code:
$('a[data-toggle=tab]').each(function () {var $this = $(this);$this.on('shown.bs.tab', function () {$container.imagesLoaded( function () {$container.masonry({columnWidth: '.item',itemSelector: '.item'}); }); });});
What happened in the above Code:
The jQuery. each () function cyclically traverses the navigation links of each tab and listens to shown. bs. tab events. When this event is triggered, the corresponding panel becomes visible, and Masonry reinitializes all the images after loading.
Let's test the code.
If you keep following the article, start your example page in your browser, or try the following CodePen example to see the result.
You may also want to take a look at the complete Example page to test the responsive layout effect.
Click the tab navigation link. Pay attention to how grid projects can be even in each panel. Changing the browser size will cause the grid project to correctly reposition itself and have a beautiful animation effect.
This is the case. The task is completed!
Conclusion
In this article, I have demonstrated how to integrate the Bootstrap tab with the Masonry JavaScript library.
Both scripts are easy to use and very powerful. However, if you put them together, you will face some layout vulnerabilities that affect hidden tabs. As shown above, the trick is to re-initialize the Masonry library after each panel becomes visible.