响应式图像网格。填写包装上的空白
问题描述:
这是我制作的响应式图像网格;响应式图像网格。填写包装上的空白
http://jsfiddle.net/robflate/kMnJH/
当电网调整大小(在浏览器调整大小),或者当在网格图像的一定数量的,它留下空的间隙。我想知道是否有什么我可以做的,也许使用jQuery,用我选择的图像填补空白。看到下面的图片,我的意思是,它显示了一个通过它的对角线的持有人图像。这完全是出于美学原因。
下面是从的jsfiddle代码;
<!doctype html>
<head>
<style type="text/css">
ul { margin: 0; padding: 0; }
figure { margin: 0; padding: 0; }
#page {
margin: 0 auto;
max-width: 1000px;
}
.item {
display:block;
position:relative;
float:left;
overflow:hidden;
width: 20%;
}
img {
max-width:100% !important;
height:auto !important;
width: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
.name a {
display:inline;
text-decoration: underline;
position:relative;
}
@media (max-width: 800px) { .item { width: 25%; } }
@media (max-width: 600px) { .item { width: 33.33%; } }
@media (max-width: 400px) { .item { width: 50%; } }
</style>
</head>
<body>
<div id="page">
<div id="gallery">
<a href="http://google.com/">
<figure class="item">
<img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
</figure>
</a>
<a href="http://google.com/">
<figure class="item">
<img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
</figure>
</a>
<a href="http://google.com/">
<figure class="item">
<img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
</figure>
</a>
<a href="http://google.com/">
<figure class="item">
<img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
</figure>
</a>
<a href="http://google.com/">
<figure class="item">
<img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
</figure>
</a>
</div>
</div>
</body>
</html>
答
根据我的理解,您希望获得图库中空白区域的数量,以便您可以在该空白处放置其他东西。
这是一个非常粗略的例子,但我想确保这是您想要实现的目标,从这一点来看,如果您有任何问题,我们可以随时改进它。
它的工作方式是每次点击它时都会显示图库中剩余空白空白的数量。