Isotope plugin help

[zebedeee]

Hi all,

I know what I want to happen and I have seen it working here:- http://thereason.us/

Here is my code so far:-

<div id="container">
  	<a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
        <a href="#" class="item"></a>
</div>

$(window).load(function() {
	
	// Randomly adds classes for sizes
	var classes = ["one", "two", "one", "one"];

    $(".item").each(function(){
        $(this).addClass(classes[Math.floor(Math.random()*classes.length)]);
    });

	var $container = $("#container"),
		$items = $('.item');
	
	$container.imagesLoaded( function(){
		$container.isotope({
			itemSelector : '.item',
			layoutMode : 'masonry',
			masonry : {
			  columnWidth : 160
			},
			
		});
	});
	
});

It works but each time the page gets refreshed and the blocks move around gaps are left from the way the blocks are arranged.

How can I stop this and allow the default small square blocks to fill the gaps?

Thank you,