在单独的选项卡中初始化多个同位素实例。标签打破同位素

Question

我有多个同位素实例在不同的标签中运行。同位素在一个标签中的功能很好，但当我切换标签时，我的页脚覆盖了同位素容器。这样做直到我点击其中一个同位素过滤器选项。一旦我点击一个，然后页脚被推下来。但是，当我回到上一个标签时 - 此标签现在搞砸了。这里有一些截图来说明我的意思。

这应该是它的样子。这就是负载加载的原因 这就是当我切换标签时它看起来像什么。然后，如果我点击“全部”它会恢复正常（我猜这是同位素打开的地方？），如果我回到第一个标签。它像这部分坏了就坏了。

这是我的html和jquery

$(document).ready(function() {
    loadCSS("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
    loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
    // filtr menu
    var navbutton = $('navbutton');

    navbutton.on('click', function() {

        $(this).siblings().removeClass('open').end().addClass('open');

    });

    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.grid-sizer'
        }
    });

    // layout Isotope after each image loads
    $grid.imagesLoaded().progress(function() {
        $grid.isotope('layout');
    });

    $('#filters').on('click', 'navbutton', function() {
        var filtr = $(this).attr('data-filter');
        $grid.isotope({
            filter: filtr
        });
    });

    $('#filters2').on('click', 'navbutton', function() {
        var filtr = $(this).attr('data-filter');
        $grid.isotope({
            filter: filtr
        });
    });
  
  $(function(){
  $('ul.tabs li:first').addClass('active');
  $('.block article').hide();
  $('.block article:first').show();
  $('ul.tabs li').on('click',function(){
    $('ul.tabs li').removeClass('active');
    $(this).addClass('active');
    $('.block article').hide();
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).show();
    return false;
  });
});

});

<!-- Image portfolio -->
<!--- tabs --->
<div class="container-fluid">
  <div class = "row">
    <div class ="col-md-8 col-md-offset-2">
<ul class="tabs">
    <li data-toggle="tab"><a href="#tab1">Interior</a></li>
    <li><a href="#tab2" data-toggle="tab">Furniture</a></li>
    <li><a href="#tab3" data-toggle="tab">Environment</a></li>
  </ul>
</div>
</div>
</div>
  <!--- end tabs --->
   <section class="block">
<article id="tab1">
<div class="container-fluid">
  <div class = "row">
    <div class ="col-md-8 col-md-offset-2">

      <!-- image Filter -->
      <gallery-filter id="filters">
    <navbutton data-filter=".bedroom">Bedroom</navbutton>
  <navbutton data-filter=".kitchen">Kitchen</navbutton>
<navbutton data-filter=".livingroom">Living Room</navbutton>
<navbutton data-filter=".other">Other</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters4">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters">
<div class="grid-sizer"></div>
<div class="grid-item bedroom">

<!-- images go here -->

</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>

<article id="tab2">
<div class="container-fluid">
<div class = "row">
  <div class ="col-md-8 col-md-offset-2">

    <!-- image Filter -->
    <gallery-filter id="filters2">
  <navbutton data-filter=".chair">Chairs</navbutton>
<navbutton data-filter=".table">Tables</navbutton>
<navbutton data-filter=".dresser">Dressers</navbutton>
<navbutton data-filter=".bed">Beds</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters3">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters2">
<div class="grid-sizer"></div>
<div class="grid-item chair">

<!-- images go here -->

</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
</section>
<!-- End Image portfolio -->

在查看堆栈溢出时，我发现了这篇文章：Making a jQuery Isotope layout initialize inside a Bootstrap Tab

我尝试了代码：

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.grid').isotope('layout');
});

但我不确定要替换shown.bs.tab的内容，并且无法使其正常工作。因为此代码适用于引导选项卡（我不使用）

任何帮助表示赞赏。谢谢

Answer 1

我有同样的问题，我看在引导程序选项卡中初始化jQuery Isotope布局并尝试但不适合我。我在bootstrap标签中发现了另一种同位素解决方案。

首先，您必须在标签中创建一个 div ，并在div中以HTML格式初始化同位素，如下所示：

<div class="tab-pane" id="messages">
  <div class="grid-message" data-isotope='{"itemSelector": ".item-message" , "gutter":5 }'>
      <div class="item-message"></div>
      <div class="item-message"></div>
     ...
      </div>
  </div>

之后添加此jquery代码，在单击选项卡时添加到reCreate布局的页面

 $(document).ready(function () {
            $(".nav-tabs a").click(function () {
                $(this).tab('show');
            });
            $('.nav-tabs a').on('shown.bs.tab', function (e) {
                if (e.target.hash == '#messages') {
                    //for isotope
                    $('.grid-message').isotope('layout');
                }

                if (e.target.hash == '#Othertabs') {}
            });
        });

工作示例：http://jsfiddle.net/Vc6Vk/38/

Answer 2

单击选项卡时需要运行布局。试试这个：

$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
$grid.isotope('layout'); //add isotope layout here
return false;
});
});