"Float" Bilder nach oben mit CSS

Question

Ich versuche, eine Pinterest-ähnliche Galerie für mein Portfolio zu erstellen. Nichts zu ausgefallenes, einfach Bilder anzeigen, die in einem Ordner mit Hilfe von ein wenig PHP gefunden werden. Später werde ich eine Lightbox (oder etwas Ähnliches) anhängen.

Derzeit habe ich Schwierigkeiten, die Bilder "schweben" zu lassen, so dass sie sich gegen die anderen Bilder bewegen. Auf magische Weise schaffen es die zwei Bilder oben rechts, aber die anderen tun es nicht.

Sie können es live hier sehen. Hier ist ein JSFiddle, aber es zeigt die Bilder nicht.

Gibt es einen einfachen Weg, dies zu tun? Oder muss ich wirklich anfangen, irgendein jQuery-Plugin dafür zu verwenden? Danke!

Answer 1

http://masonry.desandro.com/

Masonry ist ein gutes Raster anordnungs-JQuery-Plugin. Wahrscheinlich eines der besten da draußen.

Persönlich habe ich es nicht verwendet, jedoch haben Freunde von mir gute Ergebnisse damit erzielt und sagen:

• Es ist anpassbar
• Es ist ziemlich leichtgewichtig für das, was es tut
• Es ist schnell

Leider ist es nicht genau das schnellste Ding im bekannten Universum, da es JQuery verwendet (das bereits eine relativ langsame Bibliothek oder Framework ist) und obendrauf eine rechenintensive CPU-Berechnung durchführt. Als solches ist es nicht so schnell wie ein CSS-Hack, aber ob Masonry die beste Wahl ist oder nicht, hängt davon ab, wofür genau Sie es benötigen, was in dieser Frage nicht berücksichtigt wurde.

Wenn Sie etwas einfaches wie eine Portfolio-Seite erstellen, dann ist ein CSS-Hack die beste Methode, aber wenn Sie etwas weiteres erstellen, könnte dies das Richtige sein.

Leider werden Sie aufgrund von unzureichenden Standards in Browsern wie dem IE feststellen, dass es schwierig ist, dieses Layout ohne erhebliche Ressourcen auf der Clientseite zu erstellen (wie z.B. das Skalieren von Bildern für sehr große Bilder, die serverseitig beschnitten werden könnten).

o.v. und ThinkingStiff haben Antworten und wenn Sie jedes Bild, das auf Ihre Website gelangt, standardmäßig auf eine bestimmte Größe ändern und die verfügbaren Caching-Methoden für das Layout verwenden, könnten Sie problemlos mit einem CSS-Hack davonkommen, besonders für etwas Einfaches wie eine Fotoseite oder ein Portfolio.

Answer 2

Dies ist mit CSS3 column-count möglich, vorausgesetzt, Sie haben mindestens ein einzelnes enthaltendes Element. Diese Methode hat den Vorteil, dass das Layout einfach geändert werden kann (zum Beispiel für ein mobiles Gerät), indem einfach eine Klasse hinzugefügt wird.

Ausgabe:

Demo: http://jsfiddle.net/ThinkingStiff/rS95S/

CSS:

#container {
    column-count: 3;
    column-fill: balance;
    column-gap: 10px;
    width: 330px;
}

.image { 
    display: block;
    margin-bottom: 10px;
    width: 100px;
} 

HTML:

Answer 3

jQuery Masonry aus Sammayes Antwort würde funktionieren - der Trick besteht darin, dass es funktioniert, bevor der Inhalt in der ursprünglichen Reihenfolge dem DOM hinzugefügt wird (dies wäre ziemlich trivial auf einer Ajax-Website)

Es gibt jedoch einen Grund, warum das Masonry-Plugin überdimensioniert wäre - und das ist die variable Breite des Inhalts. Weder auf Pinterest noch im Portfolio-Mockup wäre dies erforderlich - gleichzeitig entsteht auf der Client-Seite ein Verarbeitungsaufwand und ein Flackern von falsch positioniertem Inhalt.

Es wäre in diesem Szenario ausreichend, einfach Container

Spalten zu verwenden:

.column {width:33.3%;float:left;/*sollte stattdessen clearfix sein*/}
.column .content {width:95%;margin:2.5%;float:left;}

Der Inhalt kann dann entweder serverseitig auf die richtigen Spalten angewendet werden (das Abrufen von Bildhöhe und -breite ist trivial, balancieren Sie einfach, wie dynamisch es sein muss) oder auf der Client-Seite mit Ajax, bevor der Inhalt hinzugefügt wird

Fiddled