Адаптивная сетка изображений.Заполните пробелы на упаковке - PullRequest
Новая
       26

Адаптивная сетка изображений.Заполните пробелы на упаковке

2 голосов
/ 02 февраля 2012

Вот созданная мной адаптивная сетка изображений;

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

При изменении размера сетки (при изменении размера браузера) или при наличии определенного количества изображений в сетке остаются пустые пробелы. Я хочу знать, могу ли я что-нибудь сделать, возможно, с помощью 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>

1 Ответ

0 голосов
/ 23 августа 2012

Насколько я понимаю, вы хотите получить количество пустых областей в галерее, чтобы потом можно было поместить что-то еще в этот промежуток.

Это очень грубый пример, но я хочу убедиться, что этоэто то, чего вы хотите достичь, и с этого момента, если у вас есть какие-либо вопросы, мы всегда можем их улучшить.

Как это работает, отображая количество пустых пробелов, оставшихся в галерее, каждый раз, когда вы нажимаете на нее.

Пожалуйста, посмотрите на пример: http://jsfiddle.net/jYGPV/1/

...