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

注意：另外，玩高峰并在background-image

上尝试.grid-item

砌体多个图像宽度

1 个答案: