Geek asks and answers

JQuery Masonry: Wrong gutters before window resizing

I have a container with a percentage width with three columns. I give these columns of fixed-width drain trays as follows:

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

This is my Freemasonry code in which I change the number of columns when resizing a window:

$( 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 columns are too large when loading the page, but they correct themselves when the window is resized. Can someone help me with this?

Here is a link to a redesign that is developing very early: http://keithpickering.net/redesign/

The green background in the container will simply help illustrate what is happening.

Thanks guys.

+5
source share
1 answer

, , . , .

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

+4

More articles:


All Articles