PHP Lang
  1. PHP Lang
  3. Архив обратного изображения: складывание изображений снизу вверх с помощью CSS / Javascript?
Intereting Posts
Laravel 5: сначала отправьте ответ, затем обработайте запрос в контроллере CodeIgniter – как поймать ошибки БД? PHP Перенаправление пользователя и продолжение сценария процесса строка json, обращаясь к различным {} объектам с php Как отправить данные формы с моего сайта на мой адрес электронной почты? Обновление с версии Kohana 2 до последней версии 3.2 Получайте содержимое корзины за пределами Magento, но в том же домене перетаскивание виджета WordPress не работает после обновления до 3.5.1 SSI включен в PHP, поскольку шаблон не работает Как отправить дополнительные данные с помощью PLupload? Почему я не должен использовать функции mysql_ * в PHP? Ошибка ffmpeg MAMP "dyld: Библиотека не загружена" Отправка / отображение изображения с кодировкой base64 Как управлять активами в Yii2? Объединить результаты для SQL-запроса

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

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

обратный архив

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

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

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

Это использует float: right упорядочивать div s по мере необходимости , а затем 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>

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

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

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

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

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

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