砌体留下空白/空隙

Question

使用masonry.js，它正在被轨道填充但是在整个地方留下空隙，我尝试了两个布局，图片和相应的代码在下面。如何摆脱红色箭头指示的间隙.Research表示它可能不会一路打包而且我应该使用packery但是我已经看到了砌筑填充整个网站的例子Example

布局1

布局1代码

HTML

<div id="restaurants">

      <%@restaurant.each do |f| %>

          <div class="box">

            <%= image_tag f.thumbnail.url(:medium)%>
          </div>

      <% end %>
  </div>

的Javascript

$(window).load(function(){
   $('#restaurants').masonry({
        itemSelector: '.box',
       gutter: 0,
       columnWidth: 1



    });
});

CSS

.box {
  height: 320px;
  width: 320px;
  margin: 0;
}

布局2（我更喜欢）

除了仅仅

的css之外，所有代码都保持不变

.box { 
  margin: 0;
}

Answer 1

填充：0px将修复您当前的问题但是对于窗口调整图像间隙，您需要考虑其他布局元素以使其响应并使其适合框...