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