Masonry ist eine tolle Möglichkeit Bilder bzw. ganze HTML-Elemente fließend darzustellen. Leider gibt es jedoch einige Problem beim Resize und auch beim Orientation-Change.

Masonry ist eines der bekanntesten Tools für tolle fließende und platzfüllende Darstellungen von HTML-Elementen. Die Library ist eigentlich sehr gut dokumentiert. Leider machen die Funktionen nicht immer nicht immer so ganz das, was tatsächlich versprochen wird.

In einem Kundenprojekt habe ich sehr intensiv mit Masonry gearbeitet und insbesondere im Bereich der mobilen Website. Hierbei ist es eben so, dass wenn man das Telefon oder Tablet dreht, dass Layout neu berechnet werden muss. Die bind-resize Funktion hat leider überhaupt nicht funktioniert. Aus diesem Grund musste ich einiges probieren und habe folgende Lösung gefunden.

Ich habe einfach eine resize Funktion geschrieben, die das vorhanden Masonry-Objekt nimmt, per destroy löscht und dann neu zeichnet. Keine Sorge, dadurch entsteht kein Flickern.

function resize() {

	if (msnry) {
		msnry.destroy();

		msnry = new Masonry('.homepage-content-stream', {
			"columnWidth": ".article-sizer",
			"itemSelector": ".article-box",
			"gutter": 0
		});
	}
}

Diese Funktion habe ich dann einfach an das Orientation-Change- und On-Resize-Event gebunden. Sobald man das Fenster dann also dreht oder einfach verkleinert oder vergrößert, wird das Layout neu aufgebaut.

window.addEventListener("resize", function() {

	resize();

});


window.addEventListener("orientationchange", function() {

	resize();

}, false);

Damit habe es tatsächlich hinbekommen, dass Masonry auch beim Resize bzw. beim Orientation-Change das Layout neu berechnet.

Diskussion

2. Mrz 2016 von Jens Caspari

Moin Tobias,
mann, vielen Dank für die Lösung. Kaum zu fassen, dass es so viele Ansätze gibt und – mir zumindest – doch nur Dein Tipp geholfen hat. Prima!

VG
Jens