幫助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/