Javascript 砌体'；s的响应式布局在更宽的页面大小上有较大的水槽

我的网站上有一个图片库风格的部分。我用砖石做图像布局。在大多数情况下，它看起来不错

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

像这样：

这不是我想要的。理想情况下，我希望图像之间始终保持较小的边距，比如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();
});  

.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;    
}

css:

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();
});  

.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）

最新上传
@如果（计数（$images）==0）
此艺术家当前没有上载任何图像。

@否则
@foreach（$images作为$image）
看起来您的图像已达到其本机分辨率，不再扩展以适应单元格。我猜你有一些CSS可以让它们响应，比如
max-width:100%。如果
最大宽度：100%我们的意思是图像可能会占用空间，但不会超过其容器允许的空间。如果图像的宽度大于父图像，则图像将缩小。如果图像的宽度小于父图像的宽度，则图像将被保留，因为它不再大于或等于父图像的宽度

要么增大源图像的大小，要么允许它们扩展到超出其原始大小（将发生像素化）

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

我相信在你的情况下正在发生的事情的例子


.container{
宽度：80%；
保证金：25像素自动；
}
.container>div{
框大小：边框框；
宽度：50%；
浮动：左；
边框：1px实心#c00；
溢出：隐藏；/*clearfix*/
}
.集装箱img{
显示：块；
最大宽度：100%；
高度：自动；
}
看起来您的图像已达到其本机分辨率，不再扩展以适应单元格。我猜你有一些CSS可以让它们响应，比如
max-width:100%。如果
最大宽度：100%我们的意思是图像可能会占用空间，但不会超过其容器允许的空间。如果图像的宽度大于父图像，则图像将缩小。如果图像的宽度小于父图像的宽度，则图像将被保留，因为它不再大于或等于父图像的宽度

要么增大源图像的大小，要么允许它们扩展到超出其原始大小（将发生像素化）

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

我相信在你的情况下正在发生的事情的例子


.container{
宽度：80%；
保证金：25像素自动；
}
.container>div{
框大小：边框框；
宽度：50%；
浮动：左；
边框：1px实心#c00；
溢出：隐藏；/*clearfix*/
}
.集装箱img{
显示：块；
最大宽度：100%；
高度：自动；
}

你说得对！有没有办法让它成为第四列，而不是进一步扩展图像？你说得对！是否有一种方法可以使它成为第四列，而不是进一步扩展图像？是否有一种方法，而不是进一步扩展图像，只是在页面扩展时添加更多列？类似这样的东西：（这使用自由墙而不是砖石）也许，我知道砖石是什么，但不熟悉任何细节。我会检查文档，因为听起来你想为你的列设置一个最大宽度。根据列宽和可用空间的大小，这些库中的任何一个都可能有或可能没有添加列的选项。快速查看，百分比宽度似乎不适合您，您必须为
.grid item
使用设置宽度。是否有一种方法，而不是进一步扩展图像，只需在页面展开时添加更多列？类似这样的东西：（这使用自由墙而不是砖石）也许，我知道砖石是什么，但不熟悉任何细节。我会检查文档，因为听起来你想为你的列设置一个最大宽度。这两个库中的任何一个都可能有或可能没有基于列宽和可用空间量添加列的选项。快速查看，百分比宽度似乎不适用于您，您必须为
.grid item
使用设置宽度。