Masonry-Skript erst ab bestimmter Viewport-Breite ausführen

In meinem neuesten Theme wird das Masonry-Skript für die Anzeige von Bilder-Grids zum Einsatz kommen. Diese Grid-Funktion brauche ich aber erst ab einer gewissen Viewport-Breite – bei schmaleren Viewports werden die Bilder einfach untereinander dargestellt, und dafür muss das Skript nicht initialisiert werden. Hier zeige ich euch, wie ich diesen bedingten Einsatz des Skripts umgesetzt habe.

Zunächst zur Vorüberlegung. Es reicht nicht aus, beim Laden der Seite die Viewport-Breite zu testen und dann abhängig davon das Skript auszuführen oder eben nicht. Wir möchten auch den Fall berücksichtigen, dass der Viewport vergrößert oder verkleinert wird, und dann gegebenenfalls das Skript ausführen oder eine bestehende Instanz zerstören. Außerdem sollen mehrere Grids auf einer Seite möglich sein.

Das hier ist das fertige Skript (mein ursprünglicher Lösungsweg hatte einen kleinen aber entscheidenden Fehler – die finale Version verdankt ihr problemloses Funktionieren der Hilfe von David DeSandro):

;(function () {
    var msnry;
    /**
     * Get the gallery grids.
     *
     * @type {NodeList}
     */
    var gridElems = document.querySelectorAll(".gallery-grid");

    /**
     * Check if we have grid elements.
     */
    if (0 === gridElems.length) {
        return
    }

    /**
     * Function for creating and destroying the masonry grids.
     */
    function masonryGrid() {
        var w = Math.max(
            document.documentElement.clientWidth,
            window.innerWidth || 0
        );

        /**
         * Only init masonry if the window is greater or equal 730px
         */
        if (w >= 730 && !msnry) {
            for (var i = 0; i < gridElems.length; i++) {
                msnry = new Masonry(gridElems[i], {
                    itemSelector: ".gallery-grid-item",
                    columnWidth: 1,
                    gutter: 0,
                    transitionDuration: 0,
                    resize: true,
                    fitWidth: true
                });
            }
        } else if (w < 730 && msnry) {
            for (var i = 0; i < gridElems.length; i++) {
                msnry = Masonry.data(gridElems[i]);
                msnry.destroy();
            }
            msnry = null;
        }
    }

    document.addEventListener("DOMContentLoaded", masonryGrid);
    window.addEventListener("resize", masonryGrid);
})();
Code-Sprache: JavaScript (javascript)

Zunächst legen wir eine Variable msnry an und holen uns eine NodeList aller Elemente, die später ein Masonry-Grid werden sollen. Nachdem wir geprüft haben, ob wir Elemente in der NodeList haben, kommt die Funktion masonryGrid(), die für die Ausführung des Masonry-Skripts zuständig ist.

Darin wird zuerst die aktuelle Viewport-Breite ermittelt und gespeichert. Anschließend folgt der Test, ob die Breite größer als oder gleich 730 ist und ob die Masonry-Variable nichts enthält – falls sie etwas enthielten wäre das das Zeichen, dass die Masonry-Instanzen bereits vorhanden sind und nicht neu erstellt werden müssen.

Danach durchlaufen wir die Grid-Elemente und initiieren jeweils ein neues Masonry-Grid, wobei das vom letzten Durchlauf in msnry gespeichert bleibt. Falls die Breite des Viewports kleiner als 730 ist und ein Objekt in msnry vorliegt, starten wir wieder eine Schleife und zerstören die Masonry-Instanzen. Danach setzen wir den Wert von msnry auf null.

Am Ende fügen wir noch zwei Event-Listener ein, damit die Funktion sowohl beim Laden der Seite als auch beim Ändern der Viewport-Größe ausgeführt wird.