我正在使用Masonry 4.2.2(cdnjs)和docs中的jQuery 3.5.0。
我有使用数组和循环为砌体生成HTML grid-items
的JavaScript。
出现这些项目,但是它们不会像应该的那样水平对齐,它们只会垂直堆叠。
https://jsfiddle.net/r8u0n6jk/
<div id="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'>
<!-- Generated HTML -->
</div>
.grid-item {
height: 100px;
margin-bottom: 1em;
padding: 1em;
background: blue;
color: white;
}
// 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,
});
});
垂直堆叠
应该在改变屏幕尺寸时将水平对齐并流畅地重新放置。
在css中添加以下语句:
.grid-item div {
display: inline
}