The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery Masonry: Gutters too wide until window is resized

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #42541

    This is infuriating me.

    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; };

    $( 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:

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

    Thanks guys.


    First off, thanks a lot for the reply. I’ve posted this in a variety of places and gotten nothing.

    This almost works. Check it out here:

    I mean, it works, but the gutters are still incorrect for a split second before the page finishes loading. I tried triggering the resize event as early as possible in the code, but I’m not exactly a jquery expert. Is there anything I can do about this?


    Hmmm…I guess it works just fine if I make the columns 1/4 the width of the container rather than 1/3. I suppose I can live with that.

    I submitted a bug report to the github anyway, because this kind of thing shouldn’t be happening :P

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.