Галерея изображений в стиле Google+

Question

Я пытаюсь выразить следующее:

Есть идеи как?В основном все фотографии имеют одинаковую высоту, а фотографии упорядочиваются / обрезаются / изменяются в размерах динамически, чтобы идеально поместиться в ряды, чтобы не было зубчатых сторон слева или справа.Если вы изменяете размеры окна браузера, оно также меняет размер фотографий.Я пробовал изотопную и jquery кладку, и ни один из них не дал мне этого эффекта.

Answer 1

Я только что реализовал эту самую вещь.Вот как я это сделал:

1. Когда страница загружается, я измеряю доступную ширину целевого контейнера (контейнера, в котором будут храниться мои изображения) и вызываю это maxWidth
2. Iсделать AJAX-вызов, передав maxWidth на сервер
3. Я определяю свой список изображений галереи для отображения на сервере и обрабатываю каждое по одному
4. Во время итерации своего списка япродолжайте добавлять изображения в строку, длина строки - максимальная доступная ширина (которую я пропустил).Как только изображение переполняет maxWidth, я вычисляю величину переполнения
5. . Я беру эту величину переполнения, делю ее на количество изображений в моей строке и вычитаю это значение из каждого изображения в строке (поэтому одноширина изображения не уменьшается слишком сильно)
6. Я повторяю это для каждой строки, поэтому каждая строка складывается в точности с maxWidth

Некоторые вещи, которые я должен был рассмотреть:

1. Я должен был принять во внимание ширину полей, которые я хотел между каждым изображением, и принять во внимание значение, накопленное в maxWidth при обработке каждой строки.
2. Нам нужно было изображение с угловым штампом (изображение, которое было больше и было зафиксировано в верхнем левом углу. Это изображение занимало две строки и было шире, чем другие мои эскизы. Мне пришлось рассчитать другую maxWidth длякак следствие, первые 2 строки.
3. Мне пришлось пересчитать размеры при изменении размера браузера. Привязка к событию изменения размера окна вызывала несколько вызовов AJAX во время перетаскивания. Мне пришлось исправить событие изменения размера, чтобы оно толькосрабатывает, когда готово.

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

Answer 2

система жидкостной сетки поможет вам в таком случае: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem