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

Question

我在不同的选项卡中有多个同位素实例运行。同位素在一个选项卡中运行良好，但当我切换选项卡时，我的页脚覆盖了同位素容器。它会执行此操作，直到我单击其中一个同位素过滤器选项。一旦我单击一个，页脚就会被推下。但是，当我返回到上一个选项卡时 - 这个选项卡现在搞砸了。这里有一些截图来说明我的意思。

这是它应该的样子。这就是负载加载的内容这就是我切换标签时最终的样子。然后如果我点击 "all" 它会恢复正常（我想这是同位素打开的地方？）如果我回到第一个选项卡。它像本节一样坏了。

这是我的 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 -->

在查看堆栈溢出时我发现了这个 post: 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 并且无法正常工作。因为此代码适用于 bootstrap 选项卡（我没有使用）

感谢任何帮助。谢谢

Answer 1

我有同样的问题，我看到 在 Bootstrap 选项卡 中初始化 jQuery 同位素布局并尝试但对我不起作用。我在 bootstrap 选项卡中找到了另一种同位素解决方案。

首先你必须在你的选项卡中创建一个div并在HTML中初始化同位素你的 div 像这样：

<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 代码添加到页面以在单击选项卡时重新创建布局

 $(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;
});
});

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

initialize multiple instances of isotope in separate tabs. The tabs break isotope

javascript

jquery

html

jquery-isotope