Использование нескольких масонских сеток на складных

Question

JSFiddle

Привет!Я решил использовать масонство, которое я нахожу совершенно потрясающим.

Хотя я столкнулся с проблемой, когда при использовании его в сборно-разборном корпусе он работает только на первой сборно-разборной конструкции, когда он открыт.Я не могу придумать, как заставить его работать, когда складной объект закрывается, а затем открывается.

Я думаю, это потому, что при загрузке страницы изображения не отображаются / не существуют.Я пытался использовать Juery для методов click, когда щелкает складная кнопка, чтобы загрузить Masonry.Кажется, это не сработало, поэтому я поцарапал это.Я пытался использовать другой метод при нажатии, чтобы перезагрузить Masonry, когда он открыт.Это также, похоже, не работает правильно.

Я довольно новичок в JavaScript, поэтому не удивлюсь, если сделаю что-то не так.Но любая помощь будет принята с благодарностью.Особенно учитывая, что последние несколько дней я бился головой об этом.

Надеюсь, этого достаточно!Заранее спасибо!

HTML:

<ul class="collapsible popout">
  <li class="active">
    <div class="collapsible-header">
      <h1 class="bodyFont noMargin">
        Landscapes
      </h1>
    </div>
    <div class="collapsible-body">
      <div class="grid">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link to album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div id="secondCategory" class="collapsible-header">
      <h1 class="bodyFont noMargin">
        Potraits
      </h1>
    </div>
    <div class="collapsible-body">
      <div class="grid">
        <div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4" id="Bees" name="Bees">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
        <div class="card deep-purple lighten-4" id="Ants" name="Ants">
          <div class="card-image">
            <img src="https://via.placeholder.com/250x350">
            <span class="card-title">Title</span>
          </div>
          <div class="card-content">
            <p>
              Description
            </p>
          </div>
          <div class="card-action">
            <a href="#">Link To Album</a>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

CSS:

.grid {
  margin: 0%;
}

.card,
.grid-sizer {
  width: 31.3%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.gutter-sizer {
  width: 2%;
}

JS:

  $(".collapsible").collapsible();
  var $grid = $(".grid");
  $grid.masonry({
    itemSelector: ".card",
    columnWidth: ".grid-sizer",
    gutter: ".gutter-sizer",
    percentposition: true,
    horizontalOrder: true
  });

  $grid.imagesLoaded().progress(function() {
    $grid.masonry("layout");
  });