How to execute code before Masonry resizes

Question

I'm using Masonry for layout. When the browser's window resizes I'd like to perform some calculations before Masonry redoes the layout.

Until now I've been able to do this by modifying the jquery.masonry.js file and add a callback function to the options. But I'd prefer to do it without modifying the masonry code.

The option added is as follows (masonry init):

$container.masonry({
    itemSelector  : '.grid-element'
    , preResizeCallback : doPreResize
    , isResizable : true
});

and then in doPreResize do whatever it is I need to do. The modification in the .js file is in the resize function (near line 293 in version v2.0.110927):

resize : function() {
  //added callback to be called before doing resizing-related code
  if (this.options.preResizeCallback)
  {
      this.options.preResizeCallback(this.element);
  }
  //rest of code

What I'd like to do is to initialize Masonry with the isResizable option set to false and then trigger the resize semi-manually, while keeping the smart resize event.

Is it possible to set up a 'smart resize' event to call a function such as resizeLayout?

function resizeLayout(event) {
    //do precalculations

    //tell masonry to reorganize layout
    $container.masonry();
}

What I'm missing is how to setup the resize event such that it isn't triggered constantly, but instead be done the same way as Masonry does when isResizable is true.

Answer 1

I can set up the event like this:

jQuery(window).bind( 'smartresize.masonry', function(){
    $container.masonry();
});

But that loses Masonry's optimization where the bricks are only rearranged if the number of columns that fit in the container change. If instead I use

jQuery(window).bind( 'smartresize.masonry', function(){
    $container.masonry("resize");
});

I end up using an internal function that isn't documented.

Answer 2

Masonry has the option to bind/unbind to the resize event.

I had the same problem, but fixed it by initializing masonry 'unbound' to the resize event, and then writing a resize function that called that called masonry in the same fashion, but after the code I wanted executed first.

$container.masonry({
    isResizeBound: false
});

$(window).bind('resize', function() {
    someFunction();
    $continer.masonry({
        isResizeBound: false
    });
});