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

Question

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

请参阅代码笔链接：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中加载会给出重叠的图像。

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

对我问题的答复将不胜感激。

问候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 个问题歌曲的男人的女人 => 她的网站是这样做的：

容器图像{宽度：105%}