如何使用打包机避免流体网格中的间隙

Question

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

查看 Codepen 的链接：http://codepen.io/nor159/pen/WbpWpe/?editors=110

    * {
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%);
}

我发现了 2 个问题：

1) 当我调整屏幕大小时，图像之间的空隙会随机出现。

2) 在 Chrome 中加载会产生重叠的图像。

有谁知道如何解决这个问题？这个网格可以用 Packery 制作吗？

我们将非常感谢您回答我的问题。

问候 1 月，奥斯陆

Answer 1

不确定这是否会 100% 有所帮助，但使用 imagesLoaded() 解决了我之前的一些砌体问题。你可以找到更多信息@http://packery.metafizzy.co/appendix.html

$(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

另一个技巧是将图像放置在比它应该在网格中更大的位置。嫁给那个会唱 99 首问题歌曲的男人的女人 => 她的网站是这样做的：

容器 img{width:105%}