Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

    Hallo an alle hier,


    ich habe gestern in diesem Thread nochmal was gepostet zu meinem Masonry, das ich grade aufsetzen wollte und hab noch gefragt, ob ich besser einen neuen Thread dazu aufmachen soll. Jetzt ist dort mein Post weg, aber Thread finde ich auch keinen dazu.

    Na gut, nachdem es ja eig um JS geht, ist es im CSS-Forum eh fehl am Platz.


    Hier mein erster Versuch. Ich habe das Masonry über HTML eingebunden, habe die jQuery-Bibliothek und die Masonry-JS geladen und aus der Layout-Anleitung ein paar Sachen übernommen, 1:1. Was rauskommt ist ein absoluter Schmarrn.

    Dann habe ich mir das nochmal angeschaut, die übernommenen Dinge rausgenommen und nur die JS übernommen und das Masonry eingebunden. Dann hab ich per CSS noch die Größe eingestellt. Klappt tatsächlich! Hier mein Masonry, das vom Grundprinzip her schon mal läuft.


    So, nun aber. Wenn ich in HMTL die Größe auf 200 einstelle, passiert gar nix. Die empfehlen ja das einzustellen.

    Zitat

    All options are optional, but columnWidth and itemSelector are recommended.


    Gut, per CSS geht's. Aber wenn ich den jQuery-Code übernehme, passiert auch nix. Ich würde jetzt gern gutter:10 einfügen, das kommt ja auch da drunter, aber wie gesagt, es passiert nix.


    Die Größe würde ich ja gern auf % einstellen. Die beschreiben das unter Layout / Responsive Layouts. Das habe ich eben gestern kopiert und das Ergebnis war, dass es alles zusammenschiebt. Verstehe ich nicht, das sollte ja einwandfrei funktionieren, kommt ja von Desandro selber. Ich kann schon im CSS 20% eingeben, das klappt für die Bilder, aber die columnWidth muss ja dann auch in % angegeben werden und das klappt im HTML auch nicht. Das macht genau nix.

    Code
    <div id="container" class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 20%}'>


    Wo liegt denn nun der Hund begraben?

    Besser nicht gleichzeitig die Konfiguration im HTML mit data-masonry und mit Javascript verwenden. Bei mir hat das zu einem zerlegten Layout geführt.

    Und das Javascript

    Code
        <script>
        $('.grid').masonry({
            columnWidth: 200,
            itemSelector: '.grid-item',
            gutter: 10
        });
    </script>

    an das Ende des body stellen, sonst sind die Elemente noch nicht vorhanden und das Anordnen beim Laden der Seite funktioniert nicht.

    Setze ich beides um, ich habe mich für die Konf. mit Javascript entschieden, funktioniert es einwandfrei, einschl. gutter.

    Danke, das klingt erstmal logisch. Funktioniert bei mir aber immer noch nicht.

    Ich will die Konfiguration ja eig eh über JS vornehmen, aber weil's da nicht ging, hab ich's im HTML dringelassen. Nehm ich da das Attribut jetzt komplett raus oder lass ich es nur leer? Bei mir geht's keine Variante der beiden.

    Nicht, dass mir nur das mit der Größe nicht angenommen wird, also das ganze JS, sondern manchmal (je nach Browserfenstergröße) werden auch die Bilder falsch angeordnet - entweder eins verschoben oder hinter ein anderes gerutscht.

    Hab die Seite nochmal aktualisiert.



    //

    Weiß eig jmd, wo mein gestriger Post hinverschwunden ist? Hat den noch jmd gesehen? Oder hab ich blöderweise nicht auf Senden geklickt? Mir ein Rätsel, was da passiert ist.

    Zitat

    Nehm ich da das Attribut jetzt komplett raus oder lass ich es nur leer? Bei mir geht's keine Variante der beiden.

    Komplett heraus nehmen, Du schreibst ja, dass Du die Konf. eh über JS machen willst.

    Schau mal, dann fällt mir das ganze Masonry zusammen. Die Bilder liegen versetzt gestapelt übereinander.

    .grid-item hab ich testweise jetzt auf 200px gesetzt.

    Bei JS hab ich 200 stehen lassen, das war original schon so. Wenn ich 200 in CSS schreibe, weiß ich gar nicht, welche Maßeinheit das dann sein soll.

    Wenn ich im JS bei columnWidth rumspiele, ändert sich schon was. Also das JS funktioniert jedenfalls. Dort ist es ohne Maßangabe automatisch Pixel. Wenn ich Prozent angebe '40%', dann fallen mir die Bilder alle auf eins zusammen.

    Dann schreib ich im HTML data-masonry  wieder rein, ohne Eigenschaften, dann ist das Raster wieder richtig, aber das JS wird nicht mehr angenommen.

    Es fuchst... Was läuft da schief?

    Ich lad das genau so jetzt nochmal rauf.


    Da fällt mir grad noch was auf. Online, nicht lokal, wenn ich die Seite aktualisier, fallen die Bilder immer noch gestapelt aufeinander. Rufe ich die Seite komplett neu auf, ist das Raster dargestellt.

    Tip von mir:


    Deine Testbilder haben alle die gleiche Grundgröße und dieselben Breiten-/Höhenverhältnisse. Verwende besser auch zum Testen schon die Bilder (oder echte unterschiedliche Bilder zum Testen), die du wirklich verwenden willst. Sonst kann es sein dass du dir mit den einheitlichen Bildern ein passendes Layout zurecht zimmerst, das dir dann aber mit den realen Bildern um die Ohren fliegt.

    Zitat

    Da fällt mir grad noch was auf. Online, nicht lokal, wenn ich die Seite aktualisier, fallen die Bilder immer noch gestapelt aufeinander. Rufe ich die Seite komplett neu auf, ist das Raster dargestellt.

    Ja, das ist mir auch schon aufgefallen. Schiebt man dann den Rand des Browserfensters werden die Elemente richtig angeordnet. Es liegt daran, dass die Abmessungen der Bilder noch nicht verfügbar sind, wenn sie nicht im Cache sind. Um das zu beheben gibt es dieses imagesloaded:

    https://masonry.desandro.com/layout.html#imagesloaded

    Eingebunden hast Du es ja schon, Du brauchst nur noch das Javascript entspr. der Anleitung zu erweitern:

    Code
        <script>
        $grid = $('.grid').masonry({
            columnWidth: '50%',
            itemSelector: '.grid-item',
            gutter:50
        });
        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
    </script>

    Danke, da bin ich gespannt, obs dann klappt.

    Bei meinem ersten Versuch auf der foto.php hab ich das ja drin und da war alles verschoben, was wohl aber auch an den CSS Klassen lag. Warum auch immer. Aber da hab ich das JS auch noch im Header stehen, weil ich dachte, der Browser muss ja wissen, was er tun soll, bevor er den Content lädt.


    Mit einer Einstellung hab ich es gestern schon geschafft, dass der Gutter bzw das ganze JS funktioniert hat (glaub es war nur, dass ich das JS in den body stellte), aber nur mit Pixeln und für responsive brauche ich ja Prozent.


    Danke erstmal, testen kann ich erst am Nachmittag.

    Also es ist wohl echt zum Verzweifeln.

    Ich häng jetzt auch mal Screenshots an. Wenn ich im HTML die Einstellungen ganz drinlasse, dann schaut's ich sag mal anders aus, richtiger. Aber richtig ist es wohl trotzdem nicht, denn mit 50% düften ja nur 2 Bilder in einer Reihe sein. 1237

    Nehm ich das aus dem HTML raus und lass nur data-masonry dortstehen, ist das Raster da, aber ohne Abstände und auch die 50% werden natürlich nicht genommen. 1238

    Nehm ich das data-masonry aus dem HTML auch noch raus, liegen alle Bilder auf einem übereinander, also das zumindest muss drin stehen bleiben.


    So, jetzt kommt's aber. Samt imagesLoad wird in Chrome alles falsch angezeigt, erst nach F5 ist das Raster sichtbar. Natürlich auch ohne die Einstellungen.


    Und meine foto.php ist in Firefox ein Chaos und in Chrome richtig. Schön, dass es in Chrome passt. Da habe ich die Sachen im Header stehen. Aber warum dann in Firefox nicht? JS ist ja doch so weit entwickelt, dass alle neuen Browser dasselbe unterstützen und dieses Masonry ist ja jetzt auch nicht so neu.


    Edit: Dass es in Chrome funktioniert und in Firefox nicht war leider bei der alten Version mit den alten Testbildern. Und lokal hatte ich bereits eine andere Datei... Ich kann also leider überhaupt nicht mehr nachvollziehen, welche Version das nun war.

    Die Console zeigt uns, wo der Fehler liegt:

    Zitat

    Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '50%' is not a valid selector.

    Der Parameter columnWidth muss entweder numerisch oder ein Selektor sein, i. allg. der für ein Item. Daran nimmt dann das Skript sozusagen Maß:

    Code
        $grid = $('.grid').masonry({
        columnWidth: '.grid-item',
        itemSelector: '.grid-item',
        gutter:50
    });
    $grid.imagesLoaded().progress(function () {
        $grid.masonry('layout');
    });

    Halleluja! Da wär ich ja nie draufgekommen! Wahrscheinlich steht deswegen bei den 200 auch nicht '200px' drinnen. Immerhin klappt die Größe jetzt!



    Übrigens klappt das mit dem gutter nur, wenn das Script im Header steht. Und auch dann trotzdem nicht richtig. Was passiert? Wenn das Script im Body steht, sieht man zuerst einen kleinen Abstand zwischen den Bildern, der dann zusammenfällt. Wenn's im Header steht, ist tatsächlich ein Abstand da, aber nicht der, den man eingestellt hat, sondern immr gleich viel - geschätzte 10px. Verschiebt man die Fenstergröße, fällt auch da der Abstand zusammen. Nur bei F5 ist er wieder da, egal wie groß das Fenster dann ist.

    Ist doch echt komisch! Selbst wenn ich percentPosition dazunehme.


    Das mit imagesLoaded muss auf jeden Fall im Body stehen, sonst geht die Funktion nicht.


    Zitat


    Set percentPosition: true so item positions are likewise set with percentages to reduce adjustment transitions on window resize.

    Eben, das hab ich ja extra rausgenommen, damit alles schön über JS läuft.

    Natürlich kann ich den Abstand auch über CSS regeln. Ich will aber, dass das gute Ding so funktioniert wie es laut Anleitung auch soll. Diese ist ja eig auch sehr schön...

    ... ich bin lokal auf den Stand gegangen, den Du online hast. Dann habe ich bemerkt, dass da doch noch ein leeres data-masonry am Container steht. Lösche ich das, wird gutter wirksam. Allerdings wird es offenbar nicht in die Berechnung einbezogen sondern ich musste das selber im CSS tun:

    Ich brauche das data-masonry im DIV, sonst funktioniert das ganze Raster überhaupt nicht. Echt interessant - 2 User, 2 Ergebnisse.


    Ich hab's jetzt über padding gelöst. Margin würde natürlich auch gehen, aber mit padding und border-box lassen sich die Prozente schöner angeben. Hab auch schon media queries eingebunden. Bin eig ganz stolz drauf, was dabei jetzt rausgekommen ist.

    Schau mal! :-)

    PS: Der graue Hintergrund dient natürlich nur der Veranschaulichung.



    Aber interessant, egal was ich ins JS schreibe, es greift nicht. Das mit der Breite hat aber geklappt, steht ja auch dort drin. Wenn ich da jetzt horizontalOrder: true setze, passiert genauso nichts wie bei gutter. Also langsam glaube ich, es liegt nicht mehr an mir, sondern an der masonry.js.

    Sooo, gut Ding braucht wohl Weile.

    Ich hab's jetzt raus.

    Das Script muss doch zur Gänze in den Body UND das data-masonry im Container raus. Dann greift alles.

    Hab die Datei aktualisiert. Oben ist das data-masonry noch drin, unten (bunt) ist es raus. Nun kann auch das Padding wieder raus... Und es tut endlich das, was es soll.


    Was ich allerdings nicht verstehe. Sowas steht nicht in der Anleitung. Was wo hinmuss... Na gut. Rätsel gelöst. Jetzt kommen die Spielereien. :)

    Hier mal der komplette Code, falls ich die Seite mal lösche... sollte sich nochmal jmd damit rumquälen.


Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden