Ach, das ist ja interessant! Was heute nicht doch schon alles geht. Ich hab eben auch nur gefunden, dass Firefox Nightly das kann - und wer hat den schon als Otto Normalverbraucher.
Erinnerst du dich an das Grid, das du mir anfangs dafür vorgestellt hast? Das konnte das ja auch nicht. Das hatten wir damals thematisiert und dann ist das Stichwort Masonry gefallen und so bin ich beim JS gelandet. Was du da jetzt zeigst mit dem box und dem wide drinnen, das ist ja noch cooler!
Mir war bis jetzt auch neu, dass man Grids eig auf alles anwenden kann, also auch UL, nicht nur DIV. Jetzt wird mir auch klar, warum diese Animations-Tutorials-Seite das ganze Masonry JS in Listen verpackt hatte... Aber gut, dafür hab ich einiges dazugelernt zum Thema JS. Nichts ist umsonst.
Alles anzeigenHallo 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.
So, jetzt mal dazu.
Das klingt erstmal ziemlich kompliziert. Es ist schon nachvollziehbar, letzten Endes auch logisch. Aber dass es so umständlich gehen muss, ist schon doof. Tatsächlich ist das ganze Masonry JS ja schon eine sehr ausgeklügelte Sache, es sollte dafür echt auch was eingebaut sein oder eine Anleitung in den FAQ geschrieben stehen.
Vielen Dank! Es funktioniert wunderbar!
Mir kam es übrigens beim Testen immer so vor als gingen Prozente immer nur auf 1 Kommastelle.
Hier nochmal eine Spielerei: https://www.w3schools.com/cssr…id-auto-flow&preval=dense
Das sieht jetzt für mich so aus als müssten die Bilder alle dasselbe Format oder entsprechend proportional sein. Also zB alle 4:3 und die Panoramabilder dann 8:3 plus die Gap dazu, damit sich dann alles schön ausgeht, denn sonst würden sie ja verzerrt werden.
Im Masonry JS sind die Panoramabilder zwar klein (nämlich gleich breit wie die normalen), aber dafür können alle Bilder unterschiedliche Formate haben.
Seh ich das richtig so?