Question

嘿！我决定使用Masonry，我觉得它非常棒。

尽管我遇到了一个问题，即当我在可折叠式折叠机中使用它时，它仅在打开时可在第一个可折叠式折叠机上使用。我似乎想不出一种方法，当可折叠式折叠器先关闭再打开时，它才能正常工作。

我认为这是因为页面加载时图像未显示/不存在。我尝试在单击方法上使用Juery来单击可折叠对象以加载Masonry时。那似乎没有用，所以我抓了一下。我尝试使用另一种on click方法在打开砌体时重新加载。这似乎也无法正常工作。

我对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");
  });

在可折叠上使用多个砌体网格

0 个答案: