我成功实现了 Masonry 脚本，但无法适应基于模型的布局。我的布局具有不同的图像宽度。我尝试了很多方法并且仍在尝试。我什至尝试了不同尺寸图像的自定义宽度，例如
.hotspot { width:47.38%}
.secpos { width:27.69%}
.thepos { width:24.7%}
你们知道我该如何解决这个问题吗？
我的例子http://codepen.io/anon/pen/NGybGb所有宽度都是width: 33.333%;
$(document).ready( function() {
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
});
检查我的模型https://dribbble.com/shots/2307670-Magazine-Website-Layout/attachments/437382
最佳答案
设置很好，但是你需要定义不同的网格大小，在设计中，我看到至少有 3 种不同的宽度:33.3333%、30% 和 40%(大的)。另一个细节是 .grid-sizer 宽度应该是您要使用的最小宽度。
稍微修改一下你的笔，这就是想法:
http://codepen.io/tomsarduy/pen/KdQWXz
注意:另外，调整高度并在 .grid-item 上尝试 background-image
关于jquery - Masonry多图像宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33284948/