Динамическая сортировка и обрезка изображений, аналогичные Google + просмотр альбома

Question

Может кто-нибудь помочь мне найти решение для достижения того же результата, что и просмотр альбома Google Plus ?

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

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

Кто-нибудь знает о плагине, который делаеттот?или если не основная математика позади этого?

Answer 1

взгляните на:

http://blog.vjeux.com/2012/javascript/image-layout-algorithm-google-plus.html

Это объясняет, как работает макет.

Также взгляните на: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/ http://www.moewashere.com/jglance/

, которые являются обеими реализациями сетки альбома Google Plus.

Answer 2

Может быть, это немного излишне для того, что вы ищете.

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

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

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

Надеюсь, это поможет.

Answer 3

То, что я нашел в Google Plus и может быть, это может помочь вам.

1. Они вырезали несколько изображений, чтобы они подходили. Вы легко можете найти его на первом изображении
2. У них есть линии изображений с одинаковой высотой

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

О, кстати, если вы покроете окно chrome сервисом Google +, оно будет выглядеть не так хорошо, как было, для некоторых строк появятся пробелы