gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:00:01 25 4
gpt4 key购买 nike

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

我有 JavaScript,它使用数组和循环为 Masonry 生成 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

最佳答案

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

关于javascript - jQuery Masonry 与 JavaScript 生成的 HTML 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61379946/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com