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

  • Dass man Unterkategorien in der Galerie machen könnte, wäre mir jetzt hier nicht aufgefallen, oder? Also quasi man klickt über der Galerie zB Makro an und bekommt nur Makrofotos angezeigt. Und das dann nochmal kombiniert mit der Fancybox.

  • Bei einem kurzen Blick auf Masonry und Fancybox kann ich nichts über Kategorien finden. Bei Fancybox kann man die Bilder unterschiedlichen Galerien zuordnen, das hat aber nur den Effekt, dass das Durchblättern bei geöffneter Fancybox auf die Bilder der betr. Galerie beschränkt ist. Aber das ist ja wahrscheinlich nicht, was Du dir vorstellst? Wenn Du bei Masonry bleiben willst, ist dann wahrscheinlich Handarbeit angesagt: Den Bildern die Kategorien z. B. in je einem data-Attribut zuordnen und dann filtern.

  • Es fuchst mich mal wieder...


    Ich hab zwei quasi identische Masonrys auf 2 verschiedenen Webseiten.

    Bei der einen, die ich zum Testen verwendet hab, passt alles. Bei der neuen sieht man beim grid-item die graue Hintergrundfarbe (die ist auch nur zum Testen da). Das bewirkt dann, dass das Overlay um einen Bruchteil unter das Bild hinausragt, das stört natürlich.

    Ich dachte zuerst, es liegt an der line-height. Die ist bei * auf 1 gestellt. Wenn ich die auf 0.5 stelle, ist der Hintergrund weg. Ich kann beim grid-item nicht die line-height verkleinern, da man anscheinend den bei * eingestellten Wert nicht unterschreiten kann. Es nützt auch nichts, in der CSS für die Galerie, die ja später eingebunden wird, das neu zu definieren, der Wert wird nicht überschrieben.

    Auf meiner anderen Seite habe ich allerdings auch eine line-height drin (von 1.3 sogar) und der Hintergrund ist trotzdem nicht sichtbar.


    Das Overlay ist ja so groß wie das grid-item. Das grid-item ist aber größer als das darin enthaltene Bild. Wenn's nicht die line-height ist, was dann? Padding ist es auch keins...


    Weiß da einer einen Rat?


    Hier ohne Hintergrund

    Hier mit Hintergrund

  • Häufiges Problem. Der Grund ist, dass der Default-Wert für vertical-align baseline ist, dadurch entsteht unten eine kleine Lücke. Du kannst das beheben, indem Du für die img-Elemente vertical-align z. B. auf top setzt.

  • Neeee, oder? Du bist mein Held! Wahnsinn!


    Ähm...verstehen tu ich's aber nicht. Die Höhe ändert sich ja dadurch theoretisch nicht, scheint aber doch. Es ist weder oben noch unten jetzt ein Hintergrund zu sehen.

  • Allerdings, da wäre ich im Leben nicht draufgekommen. Es gibt so einiges das muss man einfach wissen.


    Das mit der Schrift, ich Trottel hab tatsächlich einen anderen Fonteintrag übersehen und am PC war die andere Schrift natürlich installiert. Da sie auf den ersten Blick auch recht ähnlich sind, ist mir das zuerst nicht aufgefallen. Aber da weiß man zumindest, wo man suchen muss. Deswegen hab ich den Absatz im Post auch wieder rausgelöscht.

  • Habt ihr eine Idee, wie man das Raster richtig schön responsive macht?

    Das Komische ist nämlich, wenn ich da Prozent angebe, passt das zwar erstmal, sobald ich aber das Browserfenster verkleiner, kann sein, dass dann statt 4 nur noch 3 Bilder nebeneinanderpassen, obwohl es eig noch passen sollte. Da muss ich ein paar Pixel abziehen, was dann später passt, aber erstmal diese paar Pixel fehlen und somit am rechten Rand nicht schön in einer Linie mit dem obigen Header, Menü etc. ist.




    Mit mehr Breakpoints sieht das besser aus.


    Warum ich da erstmal 8px abziehen muss, erschließt sich mir nicht ganz. Meine gaps sind nämlich 10px breit und die Bilder haben auch keine border. Die 960px sind mein Wrapper.


    Man kann das zwar durchaus so lassen, aber ich dachte, es gibt vl eine schlauere Lösung.

  • Die schlauere Lösung wäre dem Browser das Rechnen zu überlassen. Mit Flexbox und CSS-Grid werden nur wenige Werte für ein Layout benötigt.


    Mir ist zwar nicht klar, auf welche Seite sich deine Aussagen beziehen, offensichtlich gibt es aktuell zwei.


    Nach dem was ich erkennen kann scheinen sich die Größenprobleme aus Rundungsdifferenzen zu ergeben.


    Zum einen führst du Berechnungen mit calc durch.


    Gravierender sind die Berechnungen durch JavaScript (JS). JS ist eine Programmiersprache, die zwar gerne auf Webseiten genutzt wird, mit HTML und CSS aber sachlich nicht zu tun hat. JS führt seine Berechnungen damit isoliert ohne Rücksicht auf HTML und CSS durch. Bei dem von dir gewählten Masonry werden zudem die Positionen durch JS-Berechnungen bestimmt.


    Wenn sich 4 Container in einer Reihe befinden, sich an jeder Seite in der Breite durch Rundungsdifferenzen ein Unterschied von 1px ergibt kommen 8px zusammen.


    Das ist aktuell meine Vermutung.

  • Hallo Elly, auf dieses Problem bin ich auch ganz am Anfang gestoßen als ich meine Demo mit Masonry gemacht habe und leider kenne ich auch keine einfache Lösung.

    Ich habe den Wert, um den man die Breite in Prozent verringern muss, so berechnet:


    Bezeichnen wir die Anzahl der Bilder mit nrImgs und die Breite der Gaps mit wGap.
    Die Anzahl der Gaps ist nrGaps = nrImgs - 1. Die Summe der Breite der Gaps beträgt dann
    wGapSum = nrGaps * wGap = (nrImgs - 1) * wGap
    Diese Summe muessen wir auf alle Bilder verteilen, um den Wert wDelta zu ermitteln, um den wir die Breite der Bilder verringern müssen:

    wDelta = wGapSum / nrImgs = (nrImgs - 1) * wGap / nrImgs = (nrImgs - 1) / nrImgs * wGap = (1 - 1 / nrImgs) * wGap


    So weit die Theorie. Es sollte möglich sein, den rechten Ausdruck in dem Wert für das CSS-Calc einzutragen, hier für 3 Bilder pro Zeile:

    width:calc(33.333% - (1 - 1 / 3) * 10px);

    So mit meiner Demo getestet, wo ich im Javascript gutter: 10 verwendet hatte und funktioniert dort.


    Ebenfalls ganz am Anfang fand ich es ein wenig enttäuschend, dass masonry.js einem diese Rechnerei nicht abnimmt.

  • Mit Flexbox und Grid bin ich mittlerweile vertraut. Leider nützt das beim Masonry nichts, da das ganze ja auf JS beruht. Das ist auch gut so wg der Reihenfolge.


    Die Rechnerei von Sempervivum schau ich mir zu einer muntereren Stunde an. Danke.

  • Zitat von MrMurphy

    JS ist eine Programmiersprache, die zwar gerne auf Webseiten genutzt wird, mit HTML und CSS aber sachlich nicht zu tun hat. JS führt seine Berechnungen damit isoliert ohne Rücksicht auf HTML und CSS durch.

    Diese Auffassung ist, sagen wir Mal, stark diskussionswürdig :) : Javascript führt das DOM und damit ein abstraktes Abbild der Struktur des Dokumentes einschl. der Möglichkeit, es dynamisch aufzubauen und zu verändern. Dieses Abbild steht gleichwertig neben dem Wege, die Struktur des Dokumentes durch die Auszeichnungssprache HTML zu beschreiben. Und es bietet auch die Möglichkeit, die CSS-Eigenschaften über das style-Attribut festzulegen und zu verändern, ebenso wie es durch CSS möglich ist. Bisher habe ich geschrieben "gleichwertig" und "ebenso", aber Javascript ist eine Programmiersprache und kann entsprechend viel mehr: Beliebige Ausdrücke berechnen und Algorithmen ausführen. Weil eine Auszeichnungssprache darüber nicht verfügt, gibt es immer wieder Situationen, wo sie nicht ausreicht, um ein Layout zu realisieren. Beispiele:

    • Bevor Flexlayout eingeführt wurde, war Javascript die einzig gangbare Möglichkeit, eine Reihe von Containern auf die selbe Höhe zu bringen bei unterschiedlichem Inhalt.
    • Ellys anderer Thread über das Floaten von Text, wo es mit JS eine Sache von wenigen Zeilen war, diesen Button am unteren Rand zu fixieren.
    • Das Masonry-Layout hier, das sich (zurzeit noch?) nicht mit HTML und CSS umsetzen lässt.
    Zitat

    Die schlauere Lösung wäre dem Browser das Rechnen zu überlassen.

    :) Der Browser ist in einer Programmiersprache wie C++ oder was-weiß-ich geschrieben. In einer gängigen Programmiersprache gibt es Dinge wie das DOM nicht sondern es muss erst Mal implementiert werden. Insofern ist Javascript sehr viel näher an der Struktur und Gestaltung des Dokumentes da das DOM und die Zugriffe darauf schon vorhanden sind.

  • Zitat

    Das Masonry-Layout hier, das sich (zurzeit noch?) nicht mit HTML und CSS umsetzen lässt.

    Komisch nur, dass ich bereits seit Jahren Masonry-Layouts mit CSS-Grid erstelle. Die veraltete Lösung mit JS war ja Ellys Entscheidung.


    Zudem schreibt der Masonry-Ersteller David DeSandro selbst:


    Zitat


    All sizing and styling of items is handled by your own CSS.


    Was da abgeht ist heutzutage völlig unsinnig:


    1. Der Webseitenersteller erstellt ein Layout mit CSS. Also üblich und normal.


    2. Das Javascript schnappt sich das Layout, berechnet die Bilder und setzt jedes Bild mit "position: absolute;" mit Inline-CSS an seine Position. Und überschreibt damit die CSS-Vorgaben. Mit geöffneten Entwicklerwerkzeugen kann man den Neu-Berechnungen bei einer Änderung der Fensterbreite beinah zusehen.


    Wenn jemand so ein Layout manuell erstellen würde würdest du ihn wahrscheinlich auf den Topf setzen. Nur weil das mit JS erstellt wird soll es besser sein?


    Kann ich nicht nachvollziehen.


    Zitat

    Das ist auch gut so wg der Reihenfolge.


    Das verstehe ich nicht. Was ist denn besonderes an der Reihenfolge?

  • Zur Reihenfolge. Beim Grid ist die Reihenfolge nicht von oben links zeilenweise nach rechts, dann Zeile 2, sondern in Spalten von oben nach unten angeordnet. Daa stört beim Hinzufügen gewaltig. Mich zumindest. Anders ist es mit CSS wohl noch nicht möglich. Dafür hatte ich auch noch irgendwo ein Turorial gefunden. Eig schön und einfach, wenn die Reihenfolge nicht wäre.

  • Der Artikel stammt aus dem Jahr 2014. Damals war CSS-Grid noch in der Entwicklung.


    Was die schreiben stimmt deshalb leider nicht. Mit CSS-Grid lässt sich bereits seit Jahren ein von denen so genanntes "echtes" Masonry-Grid erzeugen.

  • Der Artikel ist irreführend, da er den Eindruck erweckt, ein Masonry-Layout ist nur mit einer Anweisung möglich, in der das Wort Masonry auftaucht. Dabei wird ignoriert, dass CSS-Grid längst über eine entsprechende Anweisung verfügt.


    Ein Beispiel findet sich zum Beispiel unter


    https://labs.jensimmons.com/20…image-gallery-grid-1.html


    Das Spaltenanzahl, Bildergrößen, ... angepasst werden können sollte klar sein, da es sich um eine reine CSS-Lösung handelt.

Jetzt mitmachen!

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