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

Question

Я видел несколько сценариев jQuery, которые вы можете создать фотогалерею мозаичным способом. Как этот http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html или это http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html

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

Например, при первом входе img1.jpg он будет отображаться как 100x50, но после обновления, то же изображение может отображаться как 50x100.

Мой вопрос в том, как я могу создать этот эффект с помощью CSS и javascript?

Answer 1

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

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

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

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