jQuery masonry: Problem mit überlappenden Bildern fixen

Wenn Sie masonry für jQuery einsetzen und dabei überlappende Bilder haben, können Sie das Problem so beheben.

Das jQuery-Plugin masonry ist wirklich genial, denn es ordnet unterschiedliche große Boxen auf der Seite so an, dass Sie irgendwie ordentlich ineinander übergehen. Das sieht zum Beispiel so aus, wie die Social Cloud von kl3tte.de:

masonry

Nun kann es bei der Einbindung allerdings vorkommen, dass Bilder überlappen und dadurch die Boxen nicht ordentlich dargestellt werden. Das liegt dann in der Regel daran, dass die Bilder einfach noch nicht fertig geladen waren, als masonry die Größe der Boxen berechnen wollte.

Mit einem kleinen Trick kann man das ganz einfach beheben. Man wartet einfach auf das load-Event des Fensters (window). Wenn das ausgelöst wird, sind alle Bilder vollständig geladen und masonry kann ordentlich arbeiten.

jQuery( window ).load(function() {

  var msn = jQuery('#stream').masonry({itemSelector: '.msi'});

 });

Viel mehr ist nicht zu tun.


0 0 0


Mitdiskutieren

*