Изотоп: Галерея с гибкой шириной столбца не работает в указанном случае c

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«.

Я пробовал ее с разными событиями загрузки, но ничего не получалось.

Был бы оооочень счастлив, если бы кто-нибудь мог мне помочь!

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

Чтобы удалить переход, установите свойство 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');
});