jQuery Masonry 项目顺序

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

只需在调用 masonry 函数时添加 horizontalOrder: true 选项即可。

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

您可以查看更多选项here.