The official Masonry documentation doesn’t really cover this well, and all the external examples I found seem to be outdated. I got it working in v3.1.2 via trial and error. Basically, you just have to reload all the items before laying them out. Makes sense once you understand it…
var mediaItemContainer = $( '#container' ); mediaItemContainer.masonry( { columnWidth: '210px', itemSelector: '.item' } ); $( mediaItemContainer ).prepend( '<div class="item">foo</div>' ); $( mediaItemContainer ).masonry( 'reloadItems' ); $( mediaItemContainer ).masonry( 'layout' );
Thanks a lot man. Nearly saved my life
Thanks so much! I was missing the “layout” after “reloadItems”.
Gotta say… this helped me tremendously. So happy you did this tutorial and thanks for saving me a day of my life beating my head on code.
that works like a charm