jQuery Masonry项目订单

Question

我创建了以下CodePen：https://codepen.io/cil_dev/pen/rPgNRw

我在我的网站上使用了砌体网格，但是遇到商品编号12的问题，该问题可以放在商品编号11之后。 我不知道问题出在哪里。

这是我的代码：

$('#grid').masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.grid-item',
  gutter: 5
});

.grid-item {
  float: left;
  margin-bottom: 5px;
}

.grid-sizer,
.grid-item {
	width: calc(88vw / 3 / 2 - 5px);
}

.grid-item.landscape {
  width: calc(88vw / 3 - 5px);
  height: calc(88vw / 3 / 2 - 5px);
  background-color: yellow;
}

.grid-item.portrait {
  width: calc(88vw / 3 / 2 - 5px);
  height: calc(88vw / 3 - 5px);
  background-color: red;
}

.grid-item.square { 
   width: calc(88vw / 3 / 2 - 5px);
   height: calc(88vw / 3 / 2 - 5px);
  background-color: blue;
}

<div id="grid">
  <div class="grid-sizer"> </div>

  <div class="grid-item landscape">
    <p>Block 1</p>
  </div>

  <div class="grid-item portrait">
    <p>Block 2</p>
  </div>

  <div class="grid-item square">
    <p>Block 3</p>
  </div>

  <div class="grid-item landscape">
    <p>Block 4</p>
  </div>

  <div class="grid-item landscape">
    <p>Block 5</p>
  </div>

  <div class="grid-item square">
    <p>Block 6</p>
  </div>

  <div class="grid-item landscape">
    <p>Block 7</p>
  </div>

  <div class="grid-item square">
    <p>Block 8</p>
  </div>

  <div class="grid-item portrait">
    <p>Block 9</p>
  </div>

  <div class="grid-item landscape">
    <p>Block 10</p>
  </div>

  <div class="grid-item square">
    <p>Block 11</p>
  </div>

  <div class="grid-item square">
    <p>Block 12</p>
  </div>

  <div class="grid-item square">
    <p>Block 13</p>
  </div>

  <div class="grid-item square">
    <p>Block 14</p>
  </div>

  <div class="grid-item landscape">
    <p>Block 15</p>
  </div>
</div>

关于如何解决此问题的任何想法？ 非常感谢您的帮助。

Answer 1

在调用砌体功能时只需添加horizontalOrder: true选项。

$('#grid').masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.grid-item',
  gutter: 5,
  horizontalOrder: true,
});

您可以检查更多选项here.