Какой самый простой способ сделать фотогалерею с миниатюрами переменного размера?

Question

Я хотел бы создать галерею наподобие Google+ "Фотографии из ваших кругов", в которой миниатюры выглядят как коллаж.

• Миниатюры сохраняют соотношение сторон фотографии.
• Строки галереи близки по высоте (не равны, но очень близки).
• Расстояние между миниатюрами везде одинаково.
• Галерея заполняет прямоугольник.
• Фотографии не обрезаны. Они просто изменены, чтобы заполнить пространство.

Пожалуйста, смотрите скриншот в качестве примера: http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg

Я хотел бы узнать, как я могу использовать css / javascript / jquery для программирования эскизов галереи, подобных этой, на стороне клиента.

Спасибо за ответы!

Answer 1

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

Как правило, Google имеет огромную базу изображений, поэтому найти правильную комбинацию ширин проще для них.

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

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

Answer 2

Эта статья может оказаться полезной: Создание галереи изображений Google Plus, вдохновленной *

Он использует технику, которая не требует сортировки изображений, и это довольно просто. По сути, когда вы знаете ширину W ваших строк миниатюр, продолжайте размещать миниатюры, пока общая ширина не превысит W. Допустим, вы превышаете W на 40 пикселей. Теперь обрежьте каждый эскиз в строке (с помощью CSS), чтобы удалить всего 40 пикселей.

Если, скажем, вы хотите обрезать 10px с изображения, вы можете сделать это примерно так:

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
  <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>

Переполнение: скрытое обрезает изображение, и отрицательное поле выравнивает его по горизонтали, в основном.

Answer 3

Я собираюсь упростить то, что вижу (например, числа, которые я предоставляю, не будут 100%, с точностью до пикселя), но это даст вам один метод для достижения этой цели.

Когда я смотрю на скриншот, то вижу список изображений с соотношением сторон примерно 4х3 (или наоборот 3х4). Это соотношение сторон лежит в основе макета. Общий прямоугольник, который заполняется, может быть любым соотношением сторон, но он должен быть кратным некоторой ширине и высоте. Например, вы увидите, что каждая строка содержит несколько портретных и альбомных фотографий. Общий эффект, однако, заключается в том, что G + может извлекать из большого пула изображений и, следовательно, может выбирать комбинацию изображений, которая отвечает потребностям индивидуального соотношения сторон (ландшафтный или портретный аспект данного изображения), а также общее соотношение сторон вмещающего прямоугольника.

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

Наконец, хитрость в компоновке заключается в том, что вам нужно выяснить, какие комбинации соотношений сторон приведут к полному заполнению строки слева направо. На скриншоте мы видим три таких примера:

1. 1-й ряд = 4 пейзажных фото
2. 2-й ряд = 2 пейзажных фотографии, 2 портретных фотографии и 1 квадратная фотография
3. 3-й ряд = 3 пейзажных фото, 1 портретное фото и 1 квадратное фото

В результате этого, поскольку все миниатюры имеют одинаковую высоту, их объединенные ширины в этих конкретных комбинациях дают желаемую результирующую ширину для прямоугольника макета.

Итак, я думаю, что решение этой конкретной проблемы - это в основном вопрос решения 4 подзадач:

1. Вычислить пропорции всех фотографий в доступном "пуле фотографий"
2. Составьте список всех комбинаций форматов изображения, которые приводят к желаемой ширине (чтобы сделать один ряд)
3. Из имеющихся в наличии фотографий определите, какие фотографии можно объединить в какие допустимые комбинации, в результате чего получается один составной ряд изображений
4. Наконец, шаги 1-3 создают одну строку изображений. Чтобы получить общий прямоугольник, вы просто используете шаги 1-3, чтобы создать столько строк изображений, сколько вам нужно, а затем сложить их все друг на друга.