The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Jquery Masonry: Gutters too wide until window is resized

  • # February 7, 2013 at 3:58 am

    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.

    # February 8, 2013 at 5:57 am

    This reply has been reported for inappropriate content.

    Try to trigger the resize event at the bottom of code:

    $(window).load(function() {
    }).trigger("resize"); // Trigger the resize event once.
    # February 8, 2013 at 12:58 pm

    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?

    # February 8, 2013 at 1:19 pm

    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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed