How to add dynamic gutterWidth to jQuery Masonry?

I want to make the gutterWidth option as dynamic as the columnWidth, beacuse I want it to use with the Twitter Bootstrap responsive layout for a Wordpress site I'm working on. The layout uses a gutter-width of 20px or 30px depending on the window-width. I enhanced the _getColumns function with the following:

_getColumns:function(){
var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();

/* begin hack: read gutterWidth from int or function */

this.options.gutterWidth=(typeof this.options.gutterWidth=="function")?
this.options.gutterWidth(b):this.options.gutterWidth;

/* end hack */

Heres my init function:

$(function(){
init_masonry();
});
function init_masonry() {
var $posts = $('#posts');
$posts.imagesLoaded(function() {
    $posts.masonry({
        itemSelector : 'article.post',
        isAnimated: true,
        isResizable: true,
        gutterWidth: function(containerWidth) {
            var window_width = $(window).width();
            var gutter = (window_width < 1200) ? 20 : 30;
            return gutter;
        },
        columnWidth: function(containerWidth) {
            var window_width = $(window).width();
            var gutter = (window_width <= 1200) ? 20 : 30; 
            var box_width = (containerWidth - (3 * gutter)) / 4;
            return box_width;
        }
    });
});
}

It seems to work for the first load of the page. On my 13" Laptop (window-width >= 1200) it goes correctly with a 30px gutter. By resizing the screen, the function seems not to update to 20px.

Does anybody know how to fix that?

Thanks in advance, Moritz

Upvotes: 1