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…
1 2 3 4 5 6 7 8 | var mediaItemContainer = $( '#container' );mediaItemContainer.masonry( { columnWidth: '210px', itemSelector: '.item'} );$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );$( mediaItemContainer ).masonry( 'reloadItems' );$( mediaItemContainer ).masonry( 'layout' ); |
Ukraine win!
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.