Complemento de mampostería: cambiar el tamaño de div no causará reorganización

Tengo elementos de mampostería envueltos en 1000px de ancho div, tengo un botón para cambiar el tamaño de div a 2000x usando addClass() jQuery, el problema es que la mampostería no modificará los elementos para llenar el espacio adicional de 1000 px, sé que el cambio de tamaño funciona porque el tamaño del navegador ventana provoca una reorganización.

Albañilería:

 $(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); }); 

Botón:

 $("a.button").toggle(function(){ $(this).addClass("flip"); $("div#container").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("resize"); }); 

CSS:

 width: 1000px; /* default */ width: 2000px !important; /* on button press */ 

Intenté ejecutar (‘a’). Haga clic en la función de mampostería con el mismo botón, y parece funcionar normalmente pero el problema sigue ahí.

¿Algún consejo? Estoy perplejo :/

Creo que necesitas ejecutar la función de albañilería nuevamente cuando se hace clic en el botón de cambio de tamaño.

 $("a.button").toggle(function(){ $(this).addClass("flip"); $("div#container").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("resize"); // run masonry again $('#container').masonry({ itemSelector : '.item', columnWidth : 240 }); }); 

Desde http://masonry.desandro.com/methods.html#reloaditems , llamar a .masonry('reloadItems') capturará (posiblemente nuevos) elementos que coincidan con itemSelector y reposicionará los ladrillos, pero al llamar a .masonry() solo reposicionará los elementos Basado en las dimensiones más recientes de sus artículos.

Intenta activar el evento de cambio de tamaño con jquery:

 $(window).trigger('resize'); 

¡Funcionó para mí!