Comment tumblr et google + empilent des images comme un puzzle?

Question

Je cherche à faire une galerie d'images et je veux savoir comment empiler des images comme Google et tumblr.

ce que je veux dire par là quand vous regardez sur une page d'archives de tumblr ils sont tous empilés en colonnes: http://the-overlook-hotel.tumblr.com/archive

Cependant, je veux qu'ils se chevauchent également sur plusieurs colonnes, j'ai vu cela dans un thème sur tumblr appelé tessellate: http://www.tumblr.com/theme/30524

Voici un exemple. garder le défilement pour voir les sections où une image ou une vidéo intégrée traverserons 2 colonnes: http://idotessellate.tumblr.com/ (désolé je ne pouvais pas trouver un meilleur exemple)

Google fait quelque chose de similaire sur les pages photo Google+: https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

Est-ce type de chose a un nom? comment puis-je y arriver ou où puis-je chercher pour obtenir ces résultats

C'est comme s'ils étaient l'un sur l'autre.

Answer 1

Tumbler semble utiliser Javascript pour calculer la disposition de l'image. Une fois la page chargée, elle définit une position absolue pour chaque image. Si vous redimensionnez la fenêtre, la position de chaque image est recalculée.

Google semble avoir précommandé les images afin qu'elles s'emboîtent bien en utilisant float: left. Vous remarquerez, à l'exception de la première image, les images sont rangées en rangées. Lorsque vous redimensionnez le broswer, les images se développent ou se rétrécissent pour conserver la disposition. Pour ce faire, consultez le jQuery Masonry plugin.