javascript - Jquery Masonry 额外空间

Question

我正在尝试使用 JQUERY Masonry 制作图像网格系统，但我遇到了空间问题。

我创建了这个 DEMO 来自 codepen.io

如果您访问演示，请调整页面宽度 <580px，然后您会看到有一个额外的空间，我怎样才能删除那个额外的空间，有人可以在这方面帮助我吗？

我将这个 javascript 用于砌体选择器

$(document).ready(function() {
  $('.image-container').masonry({
   isFitWidth: true,
   itemSelector: '.user-image'
  }).imagesLoaded(function() {
   $('.image-container').masonry('reload');
  });
});

Answer 1

这按预期工作。

我对您的建议是移除图像容器上的 float 。此 IMO 为您提供您应该从 Masonry 获得的演示。

代码:

.image-container {
/* float:left; */
  position:relative;
  max-width:580px;
  display: block;
  margin: 0 auto;
  padding-left:3px;
}