Cuadrícula de imagen receptiva. Complete los espacios en blanco en la envoltura

Here is a responsive image grid I've made;

http://jsfiddle.net/robflate/kMnJH/

When the grid resizes (upon browser resize) or when there are a certain number of images in the grid, it leaves empty gaps. I want to know if there is anything I can do, perhaps using jQuery, to fill in the gaps with an image of my choosing. See the image below for what I mean, it shows a holder image with a diagonal line through it. This is purely for aesthetic reasons.

http://cl.ly/Dql6

Here is the code from the 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>

preguntado el 01 de febrero de 12 a las 22:02

1 Respuestas

From what I understand you want to get the number of empty areas within the gallery so you can then place something else in that gap.

It is a very rough example but I want to make sure that this is what you want to achieve, and from that point if you have any questions we could always improve it.

The way it works is by displaying the number of empty gaps remaining within the gallery every time you click on it.

Please, have a look at the example: http://jsfiddle.net/jYGPV/1/

Respondido 23 ago 12, 21:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.