javascript - Masonry 的响应式布局在较宽的页面尺寸上有较大的间距

Question

我的网站上有一个图片库样式部分。我正在使用 Masonry 进行图像布局。在大多数情况下，它看起来不错。

但是，当将页面扩展到更大的分辨率时，前两列之间的间距有时也会变宽。

像这样:

这不是我想要的。理想情况下，我希望图像之间始终保持较小的边距，类似于 pinterest 布局。帮忙？

相关代码如下:

js:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer',
  gutter: 5,
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});  

CSS:

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: calc(33.3333% - 5px);
}
.grid-item {
  float: left;
  margin-bottom: 5px;
}
.grid-item img {
  display: block;
  max-width: 100%;
}
.grid-item:hover img {
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;    
}

HTML/Blade(使用 laravel)

<h3>Latest uploads</h3>
@if (count($images) == 0)
<p>This artist does not have any images currently uploaded.</p> 
@else
<div class="grid">
  <div class="grid-sizer"></div>
  @foreach ($images as $image)  
  <div class="grid-item featuredTextContainer"">
    <a href="{{ route('image.get', ['username' => $user->username, 'URLtitle' => $image->url_title]) }}"><img src="{{ url($image->medium_path) }}"></a>
    <span class="featuredArtistName">{{ $image->title }}</span>
  </div>
 @endforeach
</div>
@endif

Answer 1

看起来您的图像已达到其原始分辨率，不再扩展以适应单元格。我猜你有一些 CSS 来使它们响应，比如 max-width: 100%;。在 max-width: 100%; 的情况下，我们是说图像可以占用但不超过其容器所允许的空间。如果图像的宽度大于父图像的宽度，则图像会按比例缩小。如果图像的宽度小于父图像的宽度，则该图像将保持不变，因为它不再大于或等于父图像的宽度。

要么增大源图像的大小，要么允许它们扩展到超出其原始大小(会发生像素化)。

我的回答不包括/使用 Masonry，因为我不认为这是一个 Masonry 问题，而是一个 CSS 和图像实现问题。

我认为在你的情况下发生的事情的例子。

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

示例 1 修复 - 允许图像扩展到超出原始大小

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  /* max-width: 100%; */
  width: 100%;
  height: auto;
}

<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

示例 2 修复 - 较大的图像

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
</div>