同位素：列宽灵活的库在特定情况下不起作用

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布局模式。为了解决您遇到的问题，您应该在可见性更改后触发layout。

在您的代码上，您需要更改此：

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