новые изображения Google, как они плавают правильно

Question

Кто-нибудь видел новый поиск картинок Google. Ему удается заставить изображения плавать в области. изображения вписываются в это правильно, группируя их по размерам.

Изображения лягушек

Я думаю, есть два способа сделать это:

• Сценарии по какому-то правилу, включающему ширину и высоту этих изображений
• Правило Css для создания изображений.

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

Правило Css должно заставить изображения всплывать, а также изменять их порядок.

У кого-нибудь есть другие идеи о том, как это будет работать?

Answer 1

Они изменяют размер изображения с помощью canvas js. Затем установите li width, height, а затем добавьте скрытый переполнение. Вы также можете получить тот же результат, если вы установите ширину для всех ваших изображений в css img.myimg {width: 70px}. Я не думаю, что это займет больше времени для отображения страницы, чем с использованием кода JS.

Answer 2

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

.