Help with jQuery / Freemasonry, minor tweaking

Question

In my life I cannot understand what is happening. My lack of jQuery knowledge may have something to do with this ...

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

When the page loads, there are large gaps between each photo, in height. When you click on a photo and it expands, the photos below fall into place. When the photo clicks again to collapse it, the photos will fall into place, as when loading the page. Make sense?

Why is there a gap between photos, in height, when the page loads? I guess this has something to do with the (.box img) .css () code that I continue ... But I just can't figure it out.

Here is the code.

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/

Delete

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

Change CSS

 .box img{ width:100%; } 

Other Edit: You can simply move the call to $('.box img').css... above the masonry call.

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