사파리에 동위 원소 석공 술 (또는 포장재) expecialy를 사용하는 1px 간격

Question

영어로 죄송합니다.

나는 이미지의 응답 가능한 전체 격자를 만들려고하는 문제를 파악하려고 노력하고 있습니다. 이 그리드를 생성하기 위해 나는 벽돌 레이아웃 (http://isotope.metafizzy.co/) 또는 패 커리 (http://packery.metafizzy.co/layout.html)와 함께 Isotope를 사용하고 있습니다. 나는 둘 다 시도해 본다. 그리고 나는 둘 다 똑같은 문제가있다. 브라우저의 해상도에 따라 이미지 사이에 1 픽셀 간격이 있습니다 (아래 이미지에서 볼 수 있듯이).

는

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

나는 나의 영어에 대한 미안 해요. 이것이 우리 중 많은 사람들에게 유용 할 수 있기를 바랍니다.