1px使用同位素砌體（或包裝）expecialy在Safari上的差距

我很抱歉我的英語。1px使用同位素砌體（或包裝）expecialy在Safari上的差距

這是很多天，我試圖找出一個問題，我看到試圖創建一個圖像響應全寬網格。要創建這個網格，我使用砌體佈局的同位素（http://isotope.metafizzy.co/）或Packery（http://packery.metafizzy.co/layout.html）。我已經嘗試了兩種方法，並且都有同樣的問題。對於我的瀏覽器的一些分辨率，我發現圖像之間有1px的間隙（如下圖所示）。

我看過許多職位（例如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 
    }); 
}); 
});

我附上了最後一格，我想有：

來源

2016-06-20 Manuel Ragazzini

我認爲這個問題可能出現在瀏覽器寬度不能被colums數量整除的地方。 –

後工作的許多天，我已經能夠解決我的問題要歸功於插件的作者DeSando。

正如他在本文中解釋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; 
}

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

我爲我的英語很抱歉。我希望這對我們很多人都有用。

來源

2016-06-22 10:23:15

1px使用同位素砌體（或包裝）expecialy在Safari上的差距

回答

相關問題