2

我是一个业余爱好者和初学者，试图用流畅的图像网格制作我的第一个网页，用于相同高度的垂直和水平照片。所以我正在应用 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，奥斯陆

4

1 回答 1

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%}

于 2015-03-30T04:08:04.703 回答