8 beliebte jQuery Javascript Masonry Layout Plugins

Blog

8 beliebte jQuery Javascript Masonry Layout Plugins

8 beliebte jQuery Javascript Masonry Layout Plugins

1. Mauerwerk

Was ist Mauerwerk?
Masonry ist eine JavaScript-Grid-Layout-Bibliothek. Es funktioniert, indem Elemente in optimaler Position basierend auf dem verfügbaren vertikalen Raum platziert werden, ähnlich wie ein Maurer, der Steine ​​in eine Wand einpasst. Sie haben es wahrscheinlich im gesamten Internet im Einsatz gesehen.

Mauerwerk

Mauerwerk.pkgd.min.js herunterladen

Diese Dokumente herunterladen

Seaborn 3D-Streudiagramm

Mauerwerk auf GitHub

2 Isotop

Filtern und sortieren Sie magische Layouts
Sehen isotopen.metafizzy.co für komplette Dokumente und Demos.

Isotop

Herunterladen
isotopen.pkgd.js un-minifiziert, oder
isotopen.pkgd.min.js verkleinert

Isotop auf GitHub

Isotope.pkgd.min.js herunterladen

Diese Dokumente herunterladen

3. Maurer.js

Bricklayer ist eine leichte und unabhängige Pinterest-ähnliche Cascading Grid Layout Library

Maurer.js

  • Einfacher als alle anderen kaskadierenden Raster-Layout-Tools.
  • Leicht, kein Fett. (1,5 KB gzippt)
  • Keine Rahmen erforderlich.
  • Reaktionsschneller Support ohne Störungen.
  • Einfache Konfiguration.
  • Keine Inline-Stile, statische Positionierung.
  • Lässt sich problemlos in jQuery, Angular.js und React.js integrieren.

Demo: http://bricklayer.js.org

Bricklayer.js auf GitHub

4.Freewall

Freewall ist ein browserübergreifendes und responsives jQuery-Plugin, mit dem Sie Raster-, Bild- und Mauerlayouts für Desktop, Handy und Tablet erstellen können…
Was ist Freewall?
Freewall ist ein browserübergreifendes und reaktionsschnelles jQuery-Plugin, mit dem Sie viele Arten von Rasterlayouts erstellen können: flexible Layouts, Bildlayouts, verschachtelte Rasterlayouts, Layouts im Metro-Stil, Pinterest-ähnliche Layouts … mit schönen CSS3-Animationseffekten und Rückrufereignissen. Freewall ist eine All-in-One-Lösung zum Erstellen dynamischer Raster-Layouts für Desktop, Handy und Tablet.

Einige Beispiellayouts:

Freewall

Freewall auf GitHub

sind Tweets an eine private Person

5.Gerechtfertigte Galerie

Justified Gallery ist eine JavaScript-Bibliothek, mit der Sie eine qualitativ hochwertige, ausgerichtete Bildergalerie erstellen können.

Dies ist ein häufiges Problem für Leute, die Websites erstellen: Sie müssen eine Reihe von Bildern anzeigen, wissen aber nicht, wie Sie sie elegant anordnen sollen. Wichtige Websites wie 500px, Flickr oder Google stellen Bilder hervorragend dar und rechtfertigen sie ähnlich wie Brick Wall. Justified Gallery gibt Ihnen auch die Möglichkeit dazu.

Justified Gallery ist eine professionelle und Open-Source-Bibliothek, die sogar 500px, eines der besten sozialen Netzwerke für Fotografie, für die Anzeige ihrer Bilder ausgewählt hat!

Wie kaufe ich Akita-Münzen?

Gerechtfertigte Galerie

Demo ansehen

Gerechtfertigte Galerie herunterladen

Begründete Galerie auf GitHub

6.zoomwall.js

Eine inhaltsorientierte Fotogalerie mit einem horizontalen Mauerwerk-Layout, das im Lightbox-Modus skaliert wird
zoomwall.js ist eine inhaltsorientierte Fotogalerie mit einem horizontalen Mauerwerk-Layout, das im Lightbox-Modus skaliert wird.

Besuch ericleong.github.io/zoomwall.js für eine Demo.

zoomwall.js

Demo-Zoomwall ansehen

Zoomwall.js herunterladen

zoomwall.js auf GitHub

7.ragrid

Intrinsisches erstes Flexbox-Raster mit automatischem Layout

Python-Typfehler: Sequenz kann nicht mit non-int vom Typ 'float' multipliziert werden

ragrid

Demo ansehen ragrid

Ragrid herunterladen

ragrid auf GitHub

8. Kolkade

Mauerwerk ist großartig, aber mit zunehmendem Alter ist es groß geworden. Colcade ist so konzipiert, dass es klein und schnell ist. Ich empfehle die Verwendung von Colcade über Masonry, aber lesen Sie diesen Funktionsvergleich durch.

Kolkade

Gleiche Funktionen

  • Mauerwerksraster-Layout
  • Funktioniert als jQuery-Plugin oder mit Vanilla JS
  • In HTML initialisieren
    Bessere Funktionen
  • Viel kleiner. 1/8 der Größe von Mauerwerk
  • Besseres flüssiges/responsives Layout mit nativer Browserpositionierung
  • Eine Datei, keine Abhängigkeiten, keine Paket-Dist-Build-Datei
  • Erfordert keine Bilder, die geladen werden, wenn Bilder verwendet werden

Colcade herunterladen

Colcade auf GitHub

#javascript #jQuery