时间戳

首页 > 解决方案 > 使用 JavaScript 生成的 HTML 的 jQuery Masonry 不起作用

javascript - 使用 JavaScript 生成的 HTML 的 jQuery Masonry 不起作用

问题描述

我正在使用来自cdnjs ( docs ) 的Masonry 4.2.2和jQuery 3.5.0。

我有使用数组和循环grid-items为 Masonry 生成 HTML 的 JavaScript。

这些项目出现了，但它们不会像预期的那样水平对齐，它们只会垂直堆叠。

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,
  });
});

结果

垂直堆叠

结果

所需效果

应在屏幕尺寸变化时水平对齐并流畅地重新定位。

没有 JavaScript 生成的 HTML 的工作示例：
https ://jsfiddle.net/3ys5k17p

想要的

标签： javascripthtmljqueryjquery-masonrymasonry

解决方案

在 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/

推荐阅读