Grid 如何使用封隔器避免流体网格中的间隙

我是一个业余爱好者，也是一个初学者，我试图用流体图像网格制作我的第一个网页，用于垂直和水平高度相同的照片。因此，我正在应用Packery javascript，以使其更具响应性

请参阅代码笔链接：

我发现两个问题：

1） 当我调整屏幕大小时，图像之间的空白随机出现

2） 在Chrome中加载会产生重叠图像

有人知道如何解决这个问题吗？这个网格可以用封隔器制作吗

如果您能回答我的问题，我们将不胜感激

问候

---

Jan，Oslo

不确定这是否能100%起作用，但使用imagesLoaded（）之前已经解决了我在砌石方面的一些问题。您可以找到更多信息@

另一个技巧是将图像放在网格中，使其比预期的大。这位女士嫁给了唱那首歌的人=>她的网站做到了：

---

容器img{width:105%}我要提到的另一件事是使用

ground:10

设置。您可以在css中为javaScript的回退设置边距等，但packery.js代码将根据您的设置覆盖它。

    * {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f0f0f0;
}
img {
width: 100%;
display: block;
}
.packery {
margin: 8% 8% 8% 8%;
}
.packery:after {
content: ' ';
display: block;
clear: both;
}
.item {
float: left;
}
@media screen and  (max-width:400px) {
.item.v, .grid-sizer {
width:  calc(4/14*100%);
}
.item.h {
width:  calc(9/14*100%);
}
.gutter-sizer {
width:  calc(1/14*100%);
}

$(document).ready(function(){   

         // element
imagesLoaded( document.querySelector('#container'), function( instance ) {
 console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {
    var $container = $('#container').packery({
        gutter: 10,isHorizontal:false,stamp: '.stamp',itemSelector: '.item',columnWidth: '.grid-sizer'});
        });
});
// multiple elements