Question

I am working on a hobby project which uses Jquery masonry to lay out the items in my page. I use center layout so that no matter how many items I have, they always end up in the center of my page. In fact, it works. The problem is that when the page first loads, the layout is not centered, but on the left of the page. Then it ‘jumps’ to the desired layout.

Here is my an URL to show you what I mean by that. Notice that the layout isn’t ‘correct’ after the sudden jump. What I want is eliminate the jump, make the layout centered right when the layout is presented to users.

I used ImageLoaded plugin with masonry. Here is the related code:

$('#elements').imagesLoaded(function(){
            $('#elements').masonry({
                itemSelector: '.element',
                columnWidth: 245,
                gutterWidth: 6,
                isFitWidth: true,
                isAnimated: true
            });
});

And to center the layout I add following rules to #elements:

#elements{
margin: 0 auto;
}

As indicated by the masonry document here.

So what’s my problem then? Thanks for any input.

EDIT:

Thanks to @Bendim, I figured the way to do this. I have written my answer below but there is still one remaining problem: it takes a while for the whole interface to present itself, which is not ideal. Anyway, I will work on this. Thanks again, @Bendim.

Answer 1

@Bendim gave me an idea I meant to try for a while. But when I hide the #elements div, my element overlapped after I make it fade in. So instead I hide .element div, then fade in them. Here is what I did:

.element {
    display: none;
}

then right after the masonry code:

$('#elements).mansory(
    ...
);

$('.element').each(function(i){
    $(this).fadeIn('fast');
});

It worked perfectly, no jumps at all.