Мозайка картинок, как ВКонтакте

Question

[mrspd]

Не так давно вконтакте появилась фича, когда на стене выкладывают пост с картинками, и они выстраиваются в красивую мозайку. Помню, что была статья о чем-то подобном на хабре, ноя так её и не нашел…

Но о ссылке не главный вопрос. Может быть есть какие-то js-плагины? Вообще хочу сам такую штуку написать, но вот весь день вынашиваю алгоритм и ничего в голову не приходит. Есть у кого какие идеи? Готов взяться, потом написать пост о возникнувших проблемах и естественно выложить плагин в паблик.

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

Answer 1

[Vitaliy Petrychuk]

Межете дать скриншот «как в контакте это выглядит»?
Судя по описанию вы ищете что-то вроде этого — masonry.desandro.com

Comments

[mrspd]

Скриншот можно не прилагать, по вашей ссылке именно то что нужно!
Большое спасибо!

[mrspd]

Сейчас посмотрел получше. Не совсем то… Но похоже. В личку кинули ссылку на другой пост: habrahabr.ru/post/135421/ — это ближе к правде

[nepster-web]

Заинтересовался таким-же, к сожалению. это все не то. Наброски на скорую руку, которые оставляют дырки. www.zimagez.com/zimage/-24112015-195129.php

Answer 2

[Игорь Дерябин]

tympanus.net/codrops/2011/08/30/automatic-image-montage/

Comments

[mrspd]

В отличии от jquery-gp-gallery, тут последний ряд заполняется и высота картинок подбирается автоматически, чтобы как раз этот последний ряд забить. Однозначно в копилку. Спасибо

[povisok_dmitriy]

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

Answer 3

[Skull]

Можо и без плагинов, я руками делал. Картинку оборачиваем в див, к каждому диву применяем свои стили с отрицательными смещениями, чтобы отображался именно квадрат или прямоугольник с нужными пропорциями

Comments

[deleted-Mons]

Когда картинок много, код превращается в треш. Мы когда писали галерею для сайта, тоже сначала делали таким образом, потом все же перешли на jQuery.Montage из комментария выше. У нее тоже есть свои минусы но все же лучше чем вариант с дивами.

Answer 4

[povisok_dmitriy]

как прикрутить лайтбокс вот сюда tympanus.net/codrops/2011/08/30/automatic-image-mo...