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,
after hours of code, I was no more able to find something like this by myself…
you saved my time ;)
Thanks so much, it helped alot, really appreciate this.
Thanks buddy, I almost gave up, finally this worked fine
Thanks for the tip.
Furthermore, if you’re using Masonry via Isotope use:
$( mediaItemContainer ).isotope( ‘reloadItems’ ).isotope({ sortBy: ‘original-order’ });
Instead of:
$( mediaItemContainer ).masonry( ‘reloadItems’ );
$( mediaItemContainer ).masonry( ‘layout’ );
Thank you SO much!
THANKS!
muchas gracias… no encontraba como hacerlo, y la verdad los ejemplos de la pagina no me funcionaban…
saludos
Thank you so much!
I tried so many different solutions, almost gave up but you provided the solution!
Thanks a lot, man! You made my day!
Really thanks!!!!
While using Masonry and append item, extra whitespace will be occurred at the top of those items, just adding the reload and layout and it solved!!
Just keep searching for some time, trying to add some more keyword here and benefit for more people.
Thanks a lot !
Thank you for this code. Saved me after an hour or more of futzing around trying to get this to work.
Thanks a lot. Needed to use ‘reloadItems’ to do the trick!
Thank you! Saved my life after many non-sense solution.
thank you very much!!!!!!!!!!
You are the best!
thank you dear !!!! you saved my money ! my time !!!! thank you !!!
Longlasting help! Thank-you so much!
Thx for your help……………..that works like a charm :p
Thanks man, two hours of failed experimenting…! Thanks :-)
Thx! And thx again! Original doc sucks =(
almost gave up…
A big hug from Brazil =)
Finally got it fixed after 3 days. Thanks friend!
A big hug from Bangladesh !!!!!
Worked wonders…thank you so much!!!
Thanks…thanks a lot…
Thanks… (Y)
Reload masonry after refresh views in drupal 7 : ajax
(function ($) {
Drupal.behaviors.myViewsRefresh = {
attach: function( context , settings) {
var viewName = ‘page_agenda’;
// View is Ajax enabled,
// and is available as a property of the Drupal object
// like so…
var instances = settings.views.ajaxViews;
var targetedView;
// iterate thru the various
// views instances name to find your views
$.each( instances , function getInstance( index, element){
if(element.view_name == viewName ){
var mediaItemContainer = jQuery( ‘.view-page-agenda .view-content’ );
mediaItemContainer.masonry( {
columnWidth: ”,
itemSelector: ‘.views-row’
} );
jQuery( mediaItemContainer ).masonry( ‘reloadItems’ );
jQuery( mediaItemContainer ).masonry( ‘layout’ );
}
});
}
}
})(jQuery);
Sadly, it didn’t work for me :(
You are a hero..
Hi, thanks for this. When I use $posts_container.masonry(‘reloadItems’); though the items all move back to the left hand side and get moved back to their position, which does not happen for me on page load. Are you able to help? Does this happen to you too?
Thank god you posted this. I was struggling for soooooo long! Seriously, seriously thankful I came across this post. Thank you for your knowledge!