Wie stapelt tumblr und google + Bilder wie ein Puzzle?

Question

Ich bin auf der Suche nach einer Galerie von Bildern und möchte wissen, wie man Bilder wie Google und Tumblr stapeln kann.

was meine ich damit, wenn Sie auf eine Archivseite von tumblr sehen sie in alle Spalten gestapelt werden: http://the-overlook-hotel.tumblr.com/archive

Allerdings möchte ich sie auch über mehrere Spalten überlappen, ich habe dies in einem Thema gemacht gesehen auf Tumblr genannt Tessellate: http://www.tumblr.com/theme/30524

Heres ein Beispiel dafür. halte Scrollen Abschnitte, um zu sehen, wo ein Bild oder eingebettete Videodaten über 2 Spalten gehen: http://idotessellate.tumblr.com/

Google macht etwas ähnliches auf Google+ Fotoseiten (sorry ich nicht ein besseres Beispiel finden kann): https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

tun dies Art der Sache haben einen Namen? Wie kann ich es erreichen oder wo kann ich nach diesen Ergebnissen suchen?

Es ist, als ob sie aufeinander sitzen.

Answer 1

Tumbler scheint Javascript zu verwenden, um das Layout des Bildes zu berechnen. Nachdem die Seite geladen wurde, wird für jedes Bild eine absolute Position festgelegt. Wenn Sie die Größe des Fensters ändern, wird die Position jedes Bildes neu berechnet.

Google scheint die Bilder so vorbestellt zu haben, dass sie mit Float gut zusammenpassen: links. Sie werden feststellen, dass die Bilder mit Ausnahme des ersten Bildes in Reihen angeordnet sind. Wenn Sie die Größe des Browsers ändern, werden die Bilder vergrößert oder verkleinert, um das Layout beizubehalten.

Um dies selbst zu tun, werfen Sie einen Blick auf die jQuery Masonry plugin.