Question

这是我制作的响应式图像网格;

当网格调整大小（在浏览器调整大小时）或网格中有一定数量的图像时，它会留下空白。我想知道是否有任何我可以做的事情，也许是使用jQuery，用我选择的图像填补空白。请参阅下面的图片，我的意思是，它显示了一个带有对角线的支架图像。这纯粹是出于审美原因。

http://cl.ly/Dql6

以下是来自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>

Answer 1

根据我的理解，你想获得画廊中空白区域的数量，这样你就可以在那个空隙中放置其他东西了。

这是一个非常粗略的例子，但我想确保这是你想要达到的目标，从那时起，如果你有任何问题我们可以随时改进它。

它的工作方式是每次点击图库时显示画廊中剩余的空白数量。

请看一下示例：http://jsfiddle.net/jYGPV/1/

响应图像网格。在包装上填写空白

1 个答案: