Isotope plugin help

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:-

HTML Code:

---

<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>

---

Code:

---

$(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,