JQuery Заказ масонства - PullRequest
Новая
       40

JQuery Заказ масонства

0 голосов
/ 21 февраля 2019

Я создал следующий 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>

Есть идеи, как это исправить?Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 21 февраля 2019

Просто добавьте параметр horizontalOrder: true во время вызова функции кладки. 

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

Здесь вы можете проверить другие параметры .

...