Startseite » Toolkit » Die 10 faszinierendsten jQuery-Raster

    Die 10 faszinierendsten jQuery-Raster

    jQuery ist normalerweise die erste Wahl für die meisten Leute, die ihre Füße in die JavaScript-Programmierung eintauchen möchten, da sie eine einfache Methode zum Auswählen von HTML-Elementen und zum Bearbeiten des DOM bieten. jQuery ist laut den aktuellen Statistiken von W3Techs äußerst beliebt, “jQuery wird von 95,4% aller Websites verwendet, deren JavaScript-Bibliothek wir kennen.”

    jQuery wird auch von vielen JavaScript-Bibliotheken als Abhängigkeit verwendet. Die Alpha-Version des neuen Major-Releases, jQuery 3.0, ist bereits verfügbar. Wenn Ihr Projekt jQuery in irgendeiner Weise verwendet und Sie möchten eine dynamisches, flexibles Layout Für Ihr Design ist es sinnvoll, ein jQuery-Grid-Plugin in Ihren Frontend-Stack aufzunehmen.

    Wie funktionieren jQuery-Grids??

    jQuery-Grids lassen Sie Erstellen Sie Pinterest-ähnliche Layouts für Ihre Website. Sie arbeiten wie eine virtuelle Matrix, sie folgen der “Box in einer Box” Prinzip. jQuery-Raster berechnen dynamisch die beste Anordnung der Elemente und füllen die Seite so auf, dass möglichst wenig Leerzeichen übrig bleibt. Dies ist in etwa so, wie Sie es in diesen Feldern sehen.

    BILD: DHomie Home Design Magazine

    Der Hauptvorteil von jQuery-Rastern im Vergleich zu CSS-Rastern besteht darin, dass sie mit Bildern oder anderen Medienelementen mit unterschiedlichen Breiten und Höhen arbeiten. Coole JavaScript-Effekte sind auch ein wichtiger Grund, um mit jQuery-Grids ein modernes Layout zu erstellen.

    In diesem Beitrag können Sie über das lesen 10 faszinierendste jQuery-Gitter die derzeit auf dem Markt sind - natürlich, genau wie bei jQuery, sind sie alle Open Source und kostenlos.

    1. jQuery verschachtelt

    jQuery Nested bietet Ihnen ein Handy mehrspaltiges Rasterlayout, das anspricht und funktioniert mit allen Arten von Geräten. Dieses jQuery-Plugin wirbt als völlig lückenlos. Anfangs mag dieser Slogan wie ein billiger Marketing-Trick klingen, aber das Plugin schafft die Lückenfreiheit sehr gut, genau wie die Macher es versprochen haben.

    jQuery Nested folgt einem eindeutigen Skript in Bestücken der Rastermatrix. Zuerst wird ein mehrspaltiges Gitter erstellt, dann wird die Matrix nach Lücken durchsucht und diese durch Anordnen der verschiedenen Elemente aufgefüllt. Schließlich - und das ist der Schritt, der dieses Gitter lückenlos macht - ändert es die Größe aller Elemente in der unteren Reihe, die nicht richtig in die Lücke passen.

    2. Freewall

    Mit Freewall können Sie das gewünschte Layout erstellen, sei es ein Bildgitter, ein verschachteltes Gitter, ein Mauerwerk oder ein Metro-Style-Gitter. Es gibt viele Optionen, die Sie als JavaScript-Variablen festlegen können, z gutterX, gutterY, animiert, cellW, cellH, usw. Es hat benutzerdefinierte Ereignisse wie onGapFound und onResize, und benutzerdefinierte Methoden.

    Sie können schöne Codebeispiele auf ihrer Website finden. Die Entwickler kümmerten sich auch um die armen Seelen, die noch für ältere Browser entworfen wurden, so dass Freewall dies unterstützt Internet Explorer 8, und es hat auch eine Lösung für deaktiviertes JavaScript, wie es verwendet CSS 3-Animationen als JS-Fallback-Strategie. Lesen Sie hier unseren Artikel über Freewall.

    3. Mauerwerk

    Der Name des guten alten Maurers muss jedem erfahrenen Designer gut bekannt sein. Falls Sie noch nichts davon gehört haben, ist Maurerarbeit eine kaskadierende Raster-Layout-Bibliothek das funktioniert sowohl mit jQuery als auch mit Vanilla JavaScript.

    Dieses praktische Plugin ist die Basis vieler beliebter WordPress-Themes. Sie müssen es nicht einmal auf Ihren Server hochladen, da Sie die Bibliothek direkt von einem CDN aus verknüpfen können.

    >