Jquery Masonry: Incorrect gutters until window is resized

Question

I have a percentage-width container with three columns. I give these columns fixed-width gutters like this:

width: -webkit-calc( 33.33% - 16px );
width: -moz-calc( 33.33% - 16px );
width: calc( 33.33% - 16px );

This is my Masonry code, in which I change the number of columns as the window is resized:

$( window ).load( function() {
    var columns    = 3,
    setColumns = function() { columns = $( window ).width() > 959 ? 3 : $( window ).width() > 640 ? 2 : 1; };

    setColumns();
    $( window ).resize( setColumns );

    $( '#main-posts' ).masonry({
        itemSelector : '[class*=main-posts-]',
        columnWidth : function( containerWidth ) { return containerWidth / columns; }
    });
});

The gutters between the colums are too large when the page is loaded, but they correct themselves when the window is resized. Can someone help me out with this?

Here is the link to the redesign, which is very early in development: http://keithpickering.net/redesign/

The green background on the container is just to help illustrate what is happening.

Thanks guys.

Answer 1

Had the same problem, solved it by calling the layout method after the page has been loaded. Not elegant but it works.

$(window).load(function(){ 

    var $container = $('#container');
    $container.masonry({
      gutter: 0,
      itemSelector : '.content-box',
      columnWidth: ".grid-sizer",
      isResizable: true,
    });
   /// call the layout method after all elements have been loaded
   $container.masonry();

});

http://masonry.desandro.com/methods.html#layout