砌体多图像宽度

Question

我成功实现了 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

Answer 1

设置没问题，但是你需要定义不同的网格大小，在设计中，我看到至少 3 个不同的宽度：33.3333%、30% 和 40%（大的）。另一个细节是 .grid-sizer 宽度应该是您要使用的最小宽度。

稍微砍一下笔，就是这个主意：
http://codepen.io/tomsarduy/pen/KdQWXz

注意：此外，玩一下高度并在 .grid-item

上尝试 background-image

砌体多图像宽度

Masonry multiple image width

css

jquery

masonry