我一直在尝试为投资组合网站设置砌体布局，但图像似乎没有在网格中正确对齐，因为元素往往相互重叠。有人可以指出我是否正确使用了 jQuery，或者我遇到的是不同的问题吗？谢谢!
我确保我调用了正确的选择器，这些元素似乎一直重叠。
jQuery
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
CSS
.grid {
max-width: 1200px;
}
.grid-item {
width: 200px;
height: 180px;
float: left;
}
img {
max-width:200px;
height: auto;
}
这是我链接 .js 的方式，它们都在我的元素文件夹中
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="./style.css" type:"text/css">
<title>Victor Zhang</title>
<script src="./masonry.pkgd.min.js" type = "text/javascript"></script>
<script src="./masonryjQuery.js" type = "text/javascript"></script>
</head>
我的其余 HTML
<div class="grid">
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Venmo-Final.gif">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/EQT.png">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/ezgif-4-99d82a0722.gif">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Homepage+1+-+Standard+Web.png">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/steam+app+gif.gif">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Bounce-Morph---Final-Cut_2.gif">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/BART+Map+Final-02.png">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/arkangel2.png">
</div>
<div class="grid-item">
<img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/CIG.png">
</div>
</div>
</body>
我认为这应该足以让砌体网格正常工作，但我的图像重叠并且没有正确填充空间。我需要在我的 CSS 中定义更明确的参数吗？感谢您的帮助，我真的很感激。
最佳答案
如果您有机会在 jQuery 插件上选择砌体布局的纯 CSS 实现，请检查 this出去。看路CSS column那里使用了属性。
与此同时，如果您使用的 jQuery 插件也在内部遵循相同的方法，我怀疑“ float ”可能是罪魁祸首!
关于javascript - jQuery Masonry 未正确对齐或填充网格中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56103638/