Masonry js 无法使用 bootstrap 选项卡

Question

我创建了 bootstrap 选项卡选项，我还应用了 masonry js。因此，该框会出现一个小框和另一个 big.On 第一个选项卡它工作正常但在另一个选项卡中它不工作。

我的 HTML 代码如下

 <ul class="tabs" id="myTab">
      <li class="tab-link current" data-tab="tab-1">First</li>
      <li class="tab-link" data-tab="tab-2">Second</li>
 </ul>

 <div id="tab-1" class="tab-content current">
 <div class="container">
    <div class="gridnew">
      <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
       </div>
    </div>
  </div>
 </div

 <div id="tab-2" class="tab-content current">
 <div class="container">
     <div class="gridnew">
        <div class="grid-item">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        <img src="Result-img-1.jpg" alt="">
        </div>
    </div>
  </div>
 </div

下面给出了我的 JS 代码

<script type="text/javascript">
 $('.gridnew').masonry({
    itemSelector: '.grid-item'
  });

Answer 1

终于得到答案了

每次点击我的选项卡时触发 .masonry()。

<script type="text/javascript">
  $('#myTab li').click(function (e) 
{
     $("[id^='tab']").hide(); 
     e.preventDefault()
     var ids=$(this).data('tab');
     $("#"+ids).show();
     $('.gridnew').masonry({
         itemSelector: '.grid-item'
    });
 })
</script>

Answer 2

要毫无问题地调用 'shown.bs.tab'，请使用 jQuery.noConflict()。对于砌体网格，您需要调用 'layout' 方法。

// Create the masonry grid
var $grid = $('.gridnew').masonry({
     itemSelector: '.grid-item',
     fitWidth: true,
     gutter: 0,
     percentPosition: true
});

// Issues with bs tabs and masonry refresh  
jQuery.noConflict();

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    // Reload the already created masonry grid, each time you click the Bootstrap tab
    $grid.masonry('layout');
});

Masonry js 无法使用 bootstrap 选项卡

Masonry js not working with bootstrap tab

html

javascript

css

masonry

bootstrap-4