Как получить этот конкретный макет каменной кладки с изотопом JS (только один элемент сетки!)? - PullRequest
Новая
       25

Как получить этот конкретный макет каменной кладки с изотопом JS (только один элемент сетки!)?

0 голосов
/ 22 мая 2018

Я уверен, что вы слышали о isotope.js, но вот ссылка на часть проекта: https://isotope.metafizzy.co/layout-modes/masonry.html

Вот изображение желаемого макета, для которого я собираюсь:

enter image description here

Вот кодекс, максимально приближенный к макету: https://codepen.io/levijosman/pen/GdewvN

Я пытался изменить порядокваши элементы (в зависимости от ширины макета), переключитесь на разные режимы макета (например, Packery).Как вы можете видеть, я только один элемент сетки от предполагаемого макета.Разметка должна быть возможной с isotope.js или это просто не так?

<h1>Isotope - masonry layout mode</h1>
<div class="container">
<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>  
</div>

.grid-item {
  float: left;
  width: 313.81px;
  height: 200px;
  margin-left: 10px;
  margin-bottom: 10px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 637.64px; }
.grid-item--height2 { height: 410px; }

1 Ответ

0 голосов
/ 22 мая 2018

Похоже, основная проблема в itemSelector в JavaScript;он должен иметь .grid-item вместо masonry, вот так: 

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100, 
    gutter: 8
  }
});

Тогда он должен работать так, как ожидалось, и вам просто нужно заменить свой класс grid-item--height2 другим grid-item div после большой коробки: 

<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

https://codepen.io/anon/pen/WJmmej

...