Question

You can have a look at the code http://jsfiddle.net/2eyzm/. I have no idea what I am doing wrong but it is not working. The boxes should be sliding up to fill in the gaps. Is this right?

$(function(){
$('#container').masonry({
itemSelector : '.item',
});
});​

Answer 1

This caused by incorrect script loading order. you should load jQuery before loading it’s plugins:

<script type="text/javascript" src="http://www.mattjamesrogers.com/scripts/javascript/jquery.imagesloaded.min.js"></script>
<script type="text/javascript" src="http://www.mattjamesrogers.com/scripts/javascript/jquery.masonry.min.js"></script>
<script type="text/javascript" src="http://raw.github.com/desandro/masonry/master/jquery.masonry.js"></script>
<script type="text/javascript" src="http://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

Try this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.mattjamesrogers.com/scripts/javascript/jquery.masonry.min.js"></script>    
<script type="text/javascript" src="http://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>

http://jsfiddle.net/9wGUj/