Выравнивание/сортировка изображений в HTML по разным размерам

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

У меня возникла проблема с набором логотипов, которые должны отображаться в контейнере произвольного размера. Каждый логотип имеет разный размер (т. е. миниатюра уменьшенного размера представляет собой пропорционально измененную версию логотипа).

Итак, давайте предположим, что мы хотим ограничить логотипы виртуальным квадратным полем, скажем, 120x120 пикселей, что означает, что результирующие эскизы могут состоять из изображений размером 120x20 и 30x120 и так далее. Все они будут разного размера, но не более 120 пикселей по «длинной» стороне каждого логотипа.

Хорошо, теперь о сортировке. У вас, ребята, есть хорошее предложение относительно того, как мне распечатать их? На самом деле я бы не хотел печатать каждый в квадратной сетке 120x120 (на самом деле я вижу, что виртуальная коробка может быть 200x100, и, таким образом, склоняюсь к тому, чтобы дать больше места для горизонтальных логотипов.

Но как мне создать алгоритм (на PHP), чтобы отображать их таким образом, чтобы они выглядели аккуратно сложенными и подходили лучше всего? Должен ли я просто упорядочить их по вертикали, и чем дальше вы продвигаетесь в «списке», тем шире становятся логотипы?

Любые предложения приветствуются, и если мне что-то непонятно, не стесняйтесь просить меня уточнить.


person Sandman    schedule 28.06.2011    source источник
comment
Интересный вопрос! Каким было бы идеальное поведение алгоритма? Я бы сказал, что это разновидность задачи о двумерной упаковке, которая является комбинаторной NP-сложной задачей.   -  person GordyD    schedule 28.06.2011
comment
Не лучше ли сохранить все логотипы одного размера? Если вы посмотрите на такой сайт, как logopond, все логотипы установлены на фоне одинакового размера. Так выглядит очень аккуратно и аккуратно.   -  person Richard Bell    schedule 28.06.2011
comment
Спасибо, Гордон. Это проблема, с которой я сейчас сталкиваюсь при отображении более 30 логотипов каналов для таблички каналов телевизионных сетей. Они выбирают из БД, какие каналы у них есть, а затем я отображаю их (в настоящее время) в сетке, но мне бы хотелось чего-то более плавного.   -  person Sandman    schedule 29.06.2011
comment
Ричард: Вот как я это делаю сегодня, но мне нужен более плавный макет.   -  person Sandman    schedule 29.06.2011


Ответы (1)


Я бы сгруппировал и отсортировал их сначала по высоте, упаковав их в группы одинаковой высоты (разница +-5%), а затем по ширине. Каждая группа роста получает свою собственную строку.

Может выглядеть так:

+--------------+ +-----------+ +------+
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | +-----------+ +------+
+--------------+

+------------------+ +-------------+ +-------------+ +-------------+ +------+ +--+ 
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | +--+ 
+------------------+ +-------------+ +-------------+ +-------------+ +------+


+--------------+ +------+
|              | +------+
+--------------+ 

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

person cweiske    schedule 28.06.2011
comment
Да, это дешевая версия, как я уже говорил. где вы просто упорядочиваете их по высоте или ширине. Но было бы совершенно очевидно, что это было автоматически заказано таким образом. Я думал в духе HTML+CSS, чтобы определенные размеры плавали влево/вправо, чтобы добиться более естественного потока разных размеров. - person Sandman; 29.06.2011