砌体离开 Whitespaces/Gaps

Question

与 masonry.js 一起工作，它被 rails 填充，但到处都留有空隙，我尝试了两种布局，图片和相应的代码是 below.How 可以吗摆脱红色 arrows.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 将解决您当前的问题，但对于 window 调整图像间隙大小，您需要考虑其他布局元素以使其响应并适合框...

砌体离开 Whitespaces/Gaps

Masonry Leaving Whitespaces/Gaps

javascript

html

ruby-on-rails

jquery-masonry

masonry