javascript jquery jquery-isotope jquery-masonry masonry

Isotope: Gallery with flexible column width does not work in specific case

I've tried to fit in an Isotope gallery in a column with a flexible width.

Unfortunately, it only works if I change the window size of the browser.

Here is my code:

  // 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>

The gallery is hidden in »One« – »Cats«.

I've tried it with different onload events but nothing worked well.

Would be sooooo happy if someone could help me!

Solution

As the #cats_gallery's visibility is toggled, the available vertical space are recalculated by isotope. This is due to the masonry layout mode. To solve the issue you're encountering, you should trigger the layout after visibility has changed.

On your code, you need to change this:

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

with this:

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

To remove the transition, set transitionDuration property to zero (0):

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

also, set the toggle duration to 0. Update this line (notice the 0 parameter before the callback function):

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