CODEWITHSUNDEEP
jquery
user1688793
user1688793

Reputation:

jquery masonry gutter width on page load

when the site loads the masonry boxes are arranged left first (http://herrfischerhamburg.de/re/), after 1 or 2 seconds they arrange with the correct gutter width. any idea how to make it that they are arranged with the right gutter width directly on pageload?

function init_masonry(){
var $container = $('.content');
var gutter = 12;
var min_width = 250;
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.box',
        gutterWidth: gutter,
        isAnimated: true,
          columnWidth: function( containerWidth ) {
            var num_of_boxes = (containerWidth/min_width | 0);
            var box_width = (((containerWidth - (num_of_boxes-1)*gutter)/num_of_boxes) | 0) ;
            if (containerWidth < min_width) {
                box_width = containerWidth;
            }
            $('.box').width(box_width);
            return box_width;
          }
    });
});

}

Upvotes: 0

Views: 766

Answers (1)

Layke
Layke

Reputation: 53196

You are probably missing out one of the most important bits...

What is calling init_masonry(), also you wrap $container.masonry() in the accompanying plugin .imagesLoaded().

ImagesLoaded, is a plugin which will only fire once all of the images have fully loaded. Masonry does this because it isn't sure how large each brick should be. One approach you can take, would be to set a height and width on each image, (which you should do anyway), and then don't use the imagesLoaded. This way you should not get the delay between masonry initializing and for it to be placed.

Also, do you need isAnimated set to true. This probably compounds the delay since, I believe by default the delay is 750 .

http://masonry.desandro.com/docs/animating.html

Upvotes: 1

Related Questions