在 Safari 上使用 Isotope Masonry（或 Packery）的 1px 间隙 expecialy

Question

对不起我的英语。

我花了很多天时间来解决我在尝试创建响应式全角图像网格时遇到的问题。为了创建这个网格，我使用了 Isotope with Masonry Layout (http://isotope.metafizzy.co/) or Packery (http://packery.metafizzy.co/layout.html)。我都试过了，我都遇到了同样的问题。对于我的浏览器的某些分辨率，我看到图像之间有 1px 的间隙（如下图所示）。

我在许多 post（例如 https://github.com/metafizzy/packery/issues/42）中读到过这个问题，但没有适合我的解决方案。谁能帮帮我？

目前我的代码是：

jQuery(window).load(function() {

var container = document.querySelector('.grid');
var pckry;
// using imagesLoaded http://desandro.github.io/imagesloaded
imagesLoaded( container, function() {
  pckry = new Packery( container, {
    itemSelector: '.grid-item',
    rowHeight: '.grid-sizer',
    percentPosition: true
  });
});
});

我附上我想要的最终网格：

Answer 1

经过多天的工作，我已经能够解决我的问题，感谢插件的作者 DeSando。

正如他在 post http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/ 中所解释的那样，由于 JavaScript 和 CSS 之间的像素舍入差异而出现间隙。

在我的例子中，我有一个基于四列的网格，当浏览器的宽度不能被每 4 整除时，就会出现间隙。因此，正如 DeSandro 建议 here，一种解决方法是将图像容器设置得更小一点，并用更大一点的图像来覆盖间隙。所以，在我的网站上：

HTML

<div class="grid">
   <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div>
   <div class="grid-item grid-item--width2 " ><a href=#"><img src="..." title="" class="lazy"></a></div>
   <div class="grid-item grid-item--width2 "><a href="#"><img src="..." title="" class="lazy"></a></div>
   <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div>
   <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div>
   ... 
</div>

CSS

.grid {
   margin: 0 auto;
   width: 100.4%;
   margin-bottom: 0px !important;
}
.grid-sizer,.grid-item {
   width: 24.9%;
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   list-style: none!important;
}
/* 2 columns wide */
.grid-item--width2 {
   width: 49.8%;
   display: block;
   float: left;
}
.grid-item img{
   display:block;
   width: 100.4%;
   max-width: 100.4% !important;
}

JS

// init Packery
var grid = jQuery('.grid').packery({
    itemSelector: '.grid-item',
    percentPosition: true
});
// layout Packery after each image loads
grid.imagesLoaded().progress( function() {
   grid.packery();
});

对不起我的英语。我希望这对我们许多人有用。

在 Safari 上使用 Isotope Masonry（或 Packery）的 1px 间隙 expecialy

1px gap using Isotope Masonry (or Packery) expecialy on Safari

jquery-masonry

responsive

packery

jquery-isotope