Почему мои элементы masonry.js перекрывают друг друга? - PullRequest
Новая
       34

Почему мои элементы masonry.js перекрывают друг друга?

0 голосов
/ 08 октября 2018

Я пытаюсь использовать популярную библиотеку masonry.js , но все элементы кладки накладываются друг на друга, а не выкладываются в стиле кладки.

Я перечиталдокументация довольно много раз, и я уверен, что ответ где-то там, но я не могу найти его. 

jQuery('.grid').masonry({
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  itemSelector: '.grid-item'
});
.grid-sizer,
.grid-item {
  width: 40%;
}

.gutter-sizer {
  width: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some Other here
  </div>
  <div class="grid-item">
    Blah blah blah
  </div>
  <div class="grid-item">
    asdfasdff
  </div>
  <div class="grid-item">
    214421342143
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
</div>

1 Ответ

0 голосов
/ 08 октября 2018

Только что решил сам.

Я забыл добавить html gutter-sizer и grid-sizer. 

jQuery('.grid').masonry({
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  itemSelector: '.grid-item'
});
.grid-sizer,
.grid-item {
  width: 40%;
}

.gutter-sizer {
  width: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some Other here
  </div>
  <div class="grid-item">
    Blah blah blah
  </div>
  <div class="grid-item">
    asdfasdff
  </div>
  <div class="grid-item">
    214421342143
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
</div>

<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
...