有关 Jquery/Masonry 的帮助，小调整

对于我的一生，我无法弄清楚到底发生了什么。我缺乏 Jquery 知识可能与此有关......

看看这个：http://jsfiddle.net/ryanjay/fgNMJ/ http://jsfiddle.net/ryanjay/fgNMJ/

加载页面时，每张照片之间在高度上存在较大间隙。当您单击照片并将其展开时，底部的照片会回到原位。当再次单击照片将其折叠时，照片会按页面加载时应有的方式放置到位。合理？

加载页面时，为什么照片之间存在高度间隙？我假设它与我正在进行的 (.box img).css() 代码有关...但我就是无法弄清楚。

这也是代码。

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

我想我修好了。

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

Remove:

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

修改CSS

.box img{
   width:100%;   
}

另一个编辑：你只需移动$('.box img').css...调用上面的masonry call.

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