Jquery 响应图像网格。在包装纸上填空
这是我制作的一个快速响应的图像网格 当网格调整大小（在浏览器调整大小时）或网格中有一定数量的图像时，会留下空白。我想知道我是否可以做些什么，也许可以使用jQuery，用我选择的图像来填补空白。请看下面的图片了解我的意思，它显示了一个带有对角线的支架图像。这纯粹是出于美学原因 下面是来自JSFIDLE的代码Jquery 响应图像网格。在包装纸上填空,jquery,grid,gallery,responsive-design,Jquery,Grid,Gallery,Responsive Design,这是我制作的一个快速响应的图像网格 当网格调整大小（在浏览器调整大小时）或网格中有一定数量的图像时，会留下空白。我想知道我是否可以做些什么，也许可以使用jQuery，用我选择的图像来填补空白。请看下面的图片了解我的意思，它显示了一个带有对角线的支架图像。这纯粹是出于美学原因 下面是来自JSFIDLE的代码 <!doctype html> <head> <style type="text/css"> ul { margin: 0; padding: 0;
<!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>
ul{margin:0；padding:0；}
图{边距：0；填充：0；}
#第{
保证金：0自动；
最大宽度：1000px；
}
.项目{
显示：块；
位置：相对位置；
浮动：左；
溢出：隐藏；
宽度：20%；
}
img{
最大宽度：100%！重要；
高度：自动！重要；
宽度：自动；
边界：0；
-ms插值方式：双三次插值；
垂直对齐：中间对齐；
}
.说出一个名字{
显示：内联；
文字装饰：下划线；
位置：相对位置；
}
@介质（最大宽度：800px）{.item{width:25%；}
@介质（最大宽度：600px）{.项目{宽度：33.33%；}
@介质（最大宽度：400px）{.item{width:50%；}
请看一看示例：据我所知，您希望获得图库中的空白区域数量，以便在该间隙中放置其他内容 这是一个非常粗略的例子，但我想确保这是你想要实现的，从这一点上说，如果你有任何问题，我们可以随时改进它 其工作方式是每次单击库时显示库中剩余的空间隙数 请看一看示例：