帮助jquery /砌体，小调整

Question

对于我的生活，我可以;弄清楚到底是怎么回事。我缺乏jQuery的知识可能有一些用它做...

在此请看：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; 
} 

Answer 1

我想我固定它。

编辑： http://jsfiddle.net/fgNMJ/144/

删除：

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

修改CSS

.box img{ 
    width:100%; 
} 

另一个编辑： 你可以只移动以上$('.box img').css...通话打电话给。

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