javascript - 同位素 : Gallery with flexible column width does not work in specific case

Question

我尝试将同位素库放入具有灵活宽度的列中。

不幸的是，它只有在我更改浏览器窗口大小时才有效。

这是我的代码:

  // init Isotope
  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');
  });


  // Toggle Functions
$("#one_link").click(function() {
  $("#categories").toggle();
  $("#text_three").hide();
  $("#cats_gallery").hide();
  $("#text_two").hide();
});

$("#cats_link").click(function() {
  $("#cats_gallery").toggle();
  $("#text_two").hide();
  $("#text_three").hide();
});

$("#two_link").click(function() {
  $("#text_two").toggle();
  $("#categories").hide();
  $("#cats_gallery").hide();
  $("#text_three").hide();
});

$("#three_link").click(function() {
  $("#text_three").toggle();
  $("#categories").hide();
  $("#cats_gallery").hide();
  $("#text_two").hide();
});

* {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 30px;
  line-height: 100%;
  cursor: default;
  font-family: Arial;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.column {
  border-right: 1px solid;
}

.column_content {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.column {
  display: none;
}

.column:first-child {
  display: block;
}

li:hover {
  cursor: pointer;
}







#cats_gallery {
  width: 100%;
  height: 100%;
}



.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

<div class="content">

  <div class="column">
    <div class="column_content">
      <ul>
        <li id="one_link">One</li>
        <li id="two_link">Two</li>
        <li id="three_link">Three</li>
      </ul>
    </div>
  </div>

  <div id="categories" class="column">
    <div class="column_content">
      <ul>
        <li id="cats_link">Cats</li>
      </ul>
    </div>
  </div>

  <div class="column" id="cats_gallery">
    <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
      </div>
      <div class="grid-item">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
      </div>
    </div>
  </div>

  <div class="column" id="text_two">
    <div class="column_content">
      <p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
    </div>
  </div>

  <div class="column" id="text_three">
    <div class="column_content">
      <p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
    </div>
  </div>

</div>

画廊隐藏在“One” – “Cats”中。

我尝试过使用不同的 onload 事件，但效果不佳。

如果有人能帮助我，我会非常高兴!

Answer 1

随着#cats_gallery的可见性切换，可用的垂直空间将通过同位素重新计算。这是由于 masonry 布局模式造成的。要解决您遇到的问题，您应该在可见性更改后触发布局。

在您的代码中，您需要更改以下内容:

$("#cats_link").click(function() {
    $("#cats_gallery").toggle();
    $("#text_two").hide();
    $("#text_three").hide();
});

这样:

$("#cats_link").click(function() {
    $("#cats_gallery").toggle(function () {
        $grid.isotope('layout');
    });
    $("#text_two").hide();
    $("#text_three").hide();
});

要删除过渡，请将 transitionDuration 属性设置为零 (0):

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

另外，将切换持续时间设置为 0。更新此行(注意回调函数之前的 0 参数):

$("#cats_gallery").toggle(0, function () {
    $grid.isotope('layout');
});