jQuery масонство с JavaScript сгенерировано HTML не будет работать - PullRequest
Новая
       45

jQuery масонство с JavaScript сгенерировано HTML не будет работать

0 голосов
/ 23 апреля 2020

Я использую Masonry 4.2.2 из cdn js ( документы ) и jQuery 3.5.0 .

У меня есть JavaScript, который использует массив и l oop для генерации HTML grid-items для масонства.

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

https://jsfiddle.net/r8u0n6jk/

HTML

<div id="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'>
  <!-- Generated HTML -->
</div>

CSS

.grid-item {
  height: 100px;
  margin-bottom: 1em;
  padding: 1em;
  background: blue;
  color: white;
}

JavaScript

// Gallery Item Array
var gallery = ['item 1', 'item 2', 'item 3'];


// Generate Gallery List HTML
$(document).ready(Generate);

function Generate() {
  var list = document.getElementById("gallery");
  var html = "";

  for (var i = 0; i < gallery.length; i++) {
    html += '<div class=\"grid-item\">' + gallery[i] + '</div>';
  }

  list.innerHTML = html;
}


// Masonry
$(document).ready(function() {
  $('#gallery').masonry({
    itemSelector: '.grid-item',
    columnWidth: 150,
    isFitWidth: true,
  });
});

Результат

Стеки вертикальные

result

Желаемый эффект

Должен выравниваться по горизонтали и плавно перемещаться при изменении размера экрана.

Рабочий пример без JavaScript Сгенерировано HTML:
https://jsfiddle.net/3ys5k17p

desired

1 Ответ

1 голос
/ 23 апреля 2020

Добавьте следующий оператор в css: 

.grid-item div {
   display: inline
 }

Кроме того, увеличьте ширину столбца: 

// Masonry
$(document).ready(function() {
  $('#gallery').masonry({
    itemSelector: '.grid-item',
    columnWidth: 500,
    isFitWidth: true,
  });
});

Проверьте пример: https://jsfiddle.net/uszdtpb8/

Редактировать: См. Также этот пример: https://jsfiddle.net/hq0zLgfm/

...