css float=left verhält sich als hätte es clear=both

[Gunnar Bittersmann]

@@Marcus C

Habe an das Ende der function noch folgendes angehängt, damit das ulElement auch die passende Größe hat:

Ja, da hab ich heute früh auch gerade noch drüber sinniert, dass das ulElement keine Höhe hat, wenn alle Listitems absolut positioniert sind, und nachfolgende Inhalte nicht darunter dargestellt werden (in y-Richtung), sondern darunter (in z-Richtung).

var most=0; for (var i = 0; i < columns; i++) { if (columnHeights[i][1]>most) most=columnHeights[i][1]; }

Eine Extra-Schleife und der Vergleich aufs Maximum sind allerdings nicht erforderlich. Das ist bereits da: in columnHeights werden ja die aktuellen Höhen aller Spalten festgehalten. columnHeights.sort(sortByHeight) sorgt dafür, dass die Spalte mit der geringsten Höhe im Array vorne steht, damit sie als nächstes befüllt wird. Aber auch dafür, dass die Spalte mit der größten Höhe ganz hinten steht. Da hat man die Information, die man für die Höhe von ulElement braucht. Es war lediglich die Zeile

ulElement.style.height = columnHeights[columns - 1][1] + 'px';

zu ergänzen. Ich hab das im Pen getan.

LLAP 🖖