Обратный архив изображений: укладка изображений снизу вверх с помощью CSS / Javascript? - PullRequest
Новая
       0

Обратный архив изображений: укладка изображений снизу вверх с помощью CSS / Javascript?

7 голосов
/ 22 октября 2011

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

reverse archive

Страница должна быть выровнена по правому краю, с будущими изображениями, добавленными вверху страницы. Я создаю страницу динамически с помощью PHP, извлекая имена файлов изображений из БД MySQL. Загвоздка в том, что я хотел бы, чтобы этот макет был плавным, то есть большинство PHP-трюков для подсчета изображений и построения HTML-кода соответственно выходят из окна.

Есть ли способ сделать это с помощью Javascript или даже просто CSS?

Ответы [ 3 ]

5 голосов
/ 22 октября 2011

См .: http://jsfiddle.net/thirtydot/pft6p/

При этом используются float: right до , порядок div с требуется , затем transform: scaleY(-1) переворачивает весь контейнер , и, наконец, transform: scaleY(-1) снова переворачивает каждый индивидуальное изображение назад .

Он будет работать в IE9 и выше и во всех современных браузерах.

CSS: 

#container, #container > div {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}

#container {
    background: #ccc;
    overflow: hidden;
}
#container > div {
    float: right;
    width: 100px;
    height: 150px;
    border: 1px solid red;
    margin: 15px;
    font-size: 48px;
    line-height: 150px;
    text-align: center;
    background: #fff;
}

HTML: 

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ..
</div>
2 голосов
/ 22 октября 2011

CSS Flexible Box Module был создан для такого типа вещей.Посмотрите на быстрый пример, который я набрал: http://jsfiddle.net/c6QLC/2/ (посмотрите на это в Firefox)

Теперь плохая новость: вы пока не можете на это положиться.Спецификация не только переписывается, но и текущая реализация не поддерживает box-lines (который я включил в пример), что позволило бы элементам находиться в нескольких строках, а не переполняться.

Новая спецификация записывается в dev-версии некоторых браузеров, так что это произойдет.Это просто вопрос времени.

А пока что, возможно, что-то вроде Изотоп может соответствовать вашим потребностям.

Если вы хотите проверитьСпецификация, вы можете найти здесь: http://www.w3.org/TR/css3-flexbox/

0 голосов
/ 20 июля 2012

Это можно решить с помощью jquery masonry plugin.Это немного похоже на изотоп, но бесплатно для частных и коммерческих пользователей.

...