Grow your CSS skills. Land your dream job.

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

    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.

    # February 8, 2013 at 5:57 am

    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:

    http://keithpickering.net/redesign/

    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.

*May or may not contain any actual "CSS" or "Tricks".