Как работает JavaScript для Google Images?

Question

В последнее время Google Images redesigned их сайт, поэтому при нажатии на изображение открывается большой лайтбокс. Вы можете нажимать клавиши со стрелками для продвижения фотографии. Кто-нибудь знает, как это работает?

Я предполагаю, что у них есть divs между строками, но как они определяют, где заканчивается строка или где следующий div для расширения? Они пересчитывают все, используя событие onResize?

Я довольно новичок в jQuery, так что это может быть очевидно.

EDIT: Я должен отметить, что для моего проекта все изображения имеют одинаковый размер, поэтому мне не нужен плагин динамического макета.

Answer 1

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

• jQuery
• Процесс «динамические плиточного», например. плагин jQuery Masonry
• Эффект бесконечной прокрутки, например. плагин jQuery infinitescroll

Обратите внимание, что я сказал «на основе». Вы по-прежнему необходимо предоставить:

• код на стороне сервера, чтобы служить данные/HTML,
• какой-то способ/Compose/вставка/скрыть «лайтбокс» (частично обрабатывается масонства),
• каким-то образом для предоставления необходимой функциональности со стрелкой.