Help with Jquery/Masonry, minor tweak

Question

For the life of me, I can;t figure out what the heck is going on. My lack of Jquery knowledge might have something to do with it...

Take a look at this: http://jsfiddle.net/ryanjay/fgNMJ/

When the page loads, there is major gaps, height-wise, in between each photograph. When you click a photo, and it expands, the photos on the bottom fall back into place. When the photo is clicked again to collapse it, the photos fall into place as they should when the page is loaded. Make sense?

Why is there a gap between the photos, height-wise, when the page is loaded? I am assuming it has something to do with (.box img).css() code I have going on... But I just can't figure it out.

Here is the code as well.

Jquery:

$(document).ready(function(){

    $('#grid').masonry({
        singleMode: false,
        itemSelector: '.box',
        resizeable: true,
        animate: true
    });

    $('.box img').css({
        width: '100%',
        height: 'auto'
    });

            $('.box').click(function(){
        if ($(this).is('.expanded')){
            restoreBoxes();
        } else {
            $(this)
                // save original box size
                .data('size', [ $(this).width(), $(this).height() ])
                .animate({
                    width: 400
                }, function(){
                    $('#grid').masonry();
                });
            restoreBoxes();
            $(this).addClass('expanded');
        }

        function restoreBoxes(){
            var len = $('.expanded').length - 1;
            $('.expanded').each(function(i){
                var w = $(this).data('width');
                $(this).animate({
                    width: ( w || '200' )
                }, function(){
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                })
                    .removeClass('expanded');
            });
                }
                });
        });

CSS:

.wrap {
    border: 0;
    width: 100%;
}
.box {
    float: left;
    font-size: 11px;
    width: 200px;
    margin: 0px;
    padding: 0px;
    display: inline;
}

Answer 1

I think I fixed it.

EDIT: http://jsfiddle.net/fgNMJ/144/

Remove:

$('.box img').css({
    width: '100%',
    height: 'auto'
});

Modify CSS

.box img{
   width:100%;   
}

Another Edit: You could just Move the $('.box img').css... call above the masonry call.

http://jsfiddle.net/fgNMJ/145/