container img {width：105％}

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制作吗？

对我的问题的回复将受到高度赞赏。

此致 Jan，奥斯陆

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个问题歌的家伙=＆gt;她的网站做到了这一点：

container img {width：105％}

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

1 个答案:

container img {width：105％}