search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.4k stars 2.11k forks source link

items overlapping on browser resize #778

Closed sonkrishna closed 8 years ago

sonkrishna commented 8 years ago

masonry resize issue hi I have a bunch of items which masonry is placing very well. But on resize, sometimes the items overlap.

eventItems: function() { var eventItems = $('.event-items'); if(eventItems.length <= 0) return; eventItems.append('

'); $masonryEvents = eventItems.masonry({ // options... itemSelector: '.item', columnWidth: '.item-sizer', percentPosition: true }); $masonryEvents.imagesLoaded().done( function() { $masonryEvents.masonry('layout'); }); // layout Masonry after each image loads

This is my code

Should we do something like invalidate? or destroy and reapply masonry?

sonkrishna commented 8 years ago

Update1: on every resize of window, I am giving a timeout of 500ms and calling $masonryEvents.masonry('layout'); again

This seems to work fine.

Can you give me a better way to accomplish this.

desandro commented 8 years ago

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

PLPeeters commented 8 years ago

I can confirm I've been having this issue for quite some time. I suspect it is related to image loading. I'll try to make a reduced test case if I find some time.