Получение вкладок Bootstrap, чтобы хорошо играть с масоном

Ниже приведен скелет разметки для компонента вкладок Bootstrap:

 <ul class="nav nav-tabs" id="myTab" role="tablist">

  <!-- nav item 1 -->
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>

  <!-- nav item 2 -->
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>

  <!-- nav item 3 -->
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

Классы nav nav-tabs Значение атрибута href Например, значение href#homeid="home"dividhome

Также обратите внимание, как Bootstrap обращает внимание на атрибуты доступности, такие как rolearia-controls

Вот фрагмент кода, иллюстрирующий структуру содержимого с вкладками:

 <!-- content 1 -->
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
<div class="card-group">

  <!-- first card -->
  <div class="card">
    <img class="card-img-top" src="path/to/img" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Card text here.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

  <!-- second card -->
  <div class="card">
    <!-- card markup here -->
  </div&lgt;

  <!-- third card -->
  <div class="card">
    <!-- card markup here -->
  </div>

  </div>
</div>

Просто добавьте аналогичную структуру для каждого раздела с вкладками, соответствующего элементам вкладок, которые вы кодировали выше.

Для полного кода, ознакомьтесь с демонстрацией CodePen .

Добавление библиотеки масонства

Вы можете скачать Masonry с официального сайта, нажав на кнопку Download masonry.pkgd.min.js .

Чтобы избежать проблем с макетом, автор библиотеки рекомендует использовать Masonry вместе с плагином imagesLoaded .

Для работы масонству не нужна библиотека jQuery . Тем не менее, поскольку компоненты Bootstrap JavaScript уже используют jQuery, я облегчу себе жизнь и инициализирую Masonry способом jQuery.

Вот фрагмент кода для инициализации Masonry с использованием jQuery и imagesLoaded:

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

Приведенный выше код кэширует div$container

Затем Masonry инициализируется в $container Опция columnWidth Здесь он установлен на ширину одного элемента карты, используя его имя класса. Опция itemSelector Здесь также установлен один элемент карты.

Пришло время проверить код.

 $('a[data-toggle=tab]').each(function () {
  var $this = $(this);

  $this.on('shown.bs.tab', function () {
    $container.imagesLoaded( function () {
      $container.masonry({
        columnWidth: '.card',
        itemSelector: '.card'
      });   
    });  
  });
});