jQuery砌体项目订单

Question

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

我在我的网站上使用Masonry网格，我遇到了项目编号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.