javascript - 砌体放置块之间有很大的空间

砌体存在一个巨大的问题:砌体之间形成了一些无用的空间。我已经尝试了所有方法，但没有任何帮助。如果有人可以告诉我如何解决此问题，我将非常感激。检查屏幕截图。 Result
更新:我发现，问题始于第一个图形“T恤”。不知何故，当我从那里删除class width-1时，一切都符合它的原意。
为什么会发生这种情况，我该如何解决呢？有什么建议么？我真的不能删除该数字，必须有某种方法使其与其他块相匹配。请帮忙。

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 230
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});

main
{
	height: 630px;
	margin-top: 40px;
	margin-left: 18%;
	width: 1500px;
}

figcaption
{
	position: absolute;
	width: 100%;
    height: 41px;
	bottom: 0px;
	padding-top: 13px;
	padding-left: 20px;
    font-size: 21.333px;
    font-family: "SegoeUIBold";
    opacity: 0.8;
    background-color: #FFF;
}

.grid-item
{
	width: 230px;
	height: 180px;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
.height-1
{
	height: 370px;
}

.width-1
{
	width: 360px;
}

.width-2
{
	width: 470px;
}

.height-2
{
	width: 360px;
	height: 370px;
}

.width-2 img
{
	width: 470px;
	height: 180px;
}

<main class="grid">
      <figure class="grid-item height-1 width-1">
        <img src="img/greenTshirt.png" alt="">
        <figcaption>T-Shirts</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/cards.png" alt="">
        <figcaption>Cards</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="grid-item width-2">
        <img src="img/notebooks.png" alt="">
        <figcaption>Notebooks</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
      <figure class="grid-item height-1">
        <img src="img/bags.png" alt="">
        <figcaption>Bags</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/scrum.png" alt="">
        <figcaption>Scrum cards</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="grid-item width-1">
        <img src="img/redCaps.png" alt="">
        <figcaption>Caps</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/magnets.png" alt="">
        <figcaption>Magnets</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/pens.png" alt="">
        <figcaption>Pens &amp; Pencils</figcaption>
      </figure>
      <figure class="grid-item">
        <img src="img/toys.png" alt="">
        <figcaption>Toys</figcaption>
      </figure>
  </main>

最佳答案

您缺少imagesLoaded。

例子:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

关于javascript - 砌体放置块之间有很大的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32423047/