Wie kann ich dynamisch erstellen Sie eine collage (Netz ohne Lücken) der Bilder, wo die Bilder haben unterschiedliche Höhen?

Ich will eine Seite anzeigen von Miniaturansichten. Die thumbnails sind Nutzer hochgeladenen Bildmaterial Bilder. Jedes Bild hat eine eingeschränkte Breite, aber nicht eine eingeschränkte Höhe, dies ist zu zeigen, das volle Bild ohne Beschnitt.

Möchte ich die Bilder stoßen gegen einander ohne Lücken dazwischen. Die Anzahl der Spalten ist nicht behoben: Wenn ich erweitern oder ändern der Größe der Seite sollten die Bilder fließen in richtige Anzahl von Spalten. 

float:left

ist FAST, was ich will. Außer wenn große Bilder in die Seite bekomme ich diese gapped Aussehen:

Wie kann ich dynamisch erstellen Sie eine collage (Netz ohne Lücken) der Bilder, wo die Bilder haben unterschiedliche Höhen?

Wie kann ich die beseitigen, die Lücken?

  • Definieren Sie 4 verschiedene Tabellen (mit je einer Spalte) in einer Zeile 🙂
  • Um den Blick zu bekommen, die Sie wollen, sind Sie gehen zu müssen, benutzen Sie die absolute Positionierung. Sie können entweder schreiben Sie Ihr eigenes Skript oder verwenden Sie ein plugin wie die vorgeschlagene.
InformationsquelleAutor Homan | 2011-06-30
  1. 6

    Wenn Sie wollen, um diese in css nur Sie haben, um divs für jede Spalte, - und float-Spalten (aber es vermasselt Reihenfolge der Bilder).

    Alternativ können Sie verwenden jquery-plugin, wie diese eine.

    • danke. das Mauerwerk plugin tut was ich will. Außer, dass ich hätte lieber das original, um zu gehen von Links nach rechts unten jede Zeile. Mauerwerk bedeutet dies für die erste Zeile, aber für die 2. Zeile scheint es willkürlich passen Sie das nächste Bild, um bis in die größte Lücke, die es finden kann. Obwohl Sie im Allgemeinen stil zu bekommen die um die ersten zu sein, diejenigen in der Nähe der Spitze, aber nicht unbedingt von Links nach rechts.
    • Eine Möglichkeit, um zu vermeiden, vermasselt der Bilder ist mit einem Zähler für jede vierte Bild, das Sie posten es in der bestimmten div. So haben Sie diesen Zähler, und eine while-Anweisung gehen, 1,2,3 und 4.... wenn die Zahl 1 trifft, die Sie hinzufügen, div 1, und so weiter, und wenn es schlägt, 4, fügen Sie einfach die Anzahl auf 0 zurück 🙂 Problem gelöst!
    InformationsquelleAutor Litek
  2. 9

    Nicht sicher, wie Sie Sie anmutig müssen Sie Ihre CSS, aber eine gute option, nicht weniger. Sie nutzen könnte masonry.js zu helfen, dass.

    http://css-tricks.com/seamless-responsive-photo-grid/

    • Dies sollte die gewählte Antwort!
    • Ich weiß, man beantwortet eine Weile her, aber hast du jemals herausfinden, einen Weg, um die Bilder von Links nach rechts statt von oben nach unten?
    InformationsquelleAutor onefastsnail
Schreibe einen Kommentar