Safariでアイソトープ石積み（またはパッカリー）expecialyを使用して1pxのギャップ

Question

私の英語はすみません。

私は、画像の応答全幅のグリッドを作成しようとしていることが分かります。このグリッドを作成するために、私は石積みレイアウト（http://isotope.metafizzy.co/）またはパッカー（http://packery.metafizzy.co/layout.html）とアイソトープを使用しています。私は両方を試みました、そして、私は同じ問題を抱えています。私のブラウザのいくつかの解像度については、画像間に1ピクセルのギャップがあります（下の画像で分かるように）。

私は（たとえばhttps://github.com/metafizzy/packery/issues/42用）の多くの記事でこの問題について読んだことがあるが、解決策は私のために働きません。誰でも私を助けることができますか？

現時点では私のコードは次のとおりです。仕事の何日後

Answer 1

私は解決することができました：

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

は、私は私が持っていると思い、最終的なグリッドを添付しますプラグインの作者DeSandoに感謝します。

この投稿に記載されているように、http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/JavaScriptとCSSのピクセルの丸めの違いによってギャップが発生します。

私の場合、私は4列に基づいてグリッドを持っていて、ブラウザの幅が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(); 
}); 

私は私の英語のためすみません。これが私たちの多くにとって有益なことを願っています。