JQuery Freemasonry! Update columnWidth On Window Resize

Question

I am working on responsive layout, where I also use jQuery classification.

I use the following script to get the current column width.

var curWidth; var detector; detector = $('.magic-column'); curWidth = detector.outerWidth(true); $(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); } }); 

My JQuery Masonry init script is something like this.

 $(window).load(function(){ $(function (){ $wall.masonry({ singleMode: true, columnWidth: curWidth, // This needs to be update on window load & resize both // }); }); }); 

My first script chooses the width correctly, but in the masonry this width is not updated ... How can I implement the load and resize function so that my curWidth is updated for Freemasonry, as well as when resizing the window

Answer 1

You need to set the masonry columnWidth after resizing:

 $(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); $wall.masonry( 'option', { columnWidth: curWidth }); } }); 

Yuo can learn more about masonry methods here: http://masonry.desandro.com/methods.html

Answer 2

bindResize can be used to resize all elements in a container when using a fluid layout ( bindResize is located at https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js

 $container.masonry({ itemSelector: '.container' }); $(window).resize(function () { $container.masonry('bindResize') });