jquery - JQuery Masonry が垂直方向に整列しないのはなぜですか?

Question

WordPress テーマの石積みグリッドを設定しようとしています。縦に並びません。多くのチュートリアルを読み、多くのスタックオーバーフローの回答を検索しました。私はすべての解決策を試しましたが、何もうまくいかないようです。

http://michellecantin.ca/test/portfolio-2/3444-2/

これは私のCSSです：

#container {
position:relative;
left:28%;
width:69%;
}

.item {
width:200px;
float:left;
background: #fff;
}

head セクションに JQuery 関数があります。

<!--Jquery functions-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.masonry.min.js"></script>
<script type="text/javascript">    // This block will be put in a separate file later on (JQuery.js)
$(document).ready(function() {
   var $container = $('#container');            
   //$container.imagesLoaded(function(){                    
      $container.masonry({
         itemSelector: '.item',
         isAnimated: true,
      });
   //});
});
</script>

ヘッダーの後、グリッドがあります。

<div name="top" id="container">
    <div class="item">
        <h3>1</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>2</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>3</h3>
        <p></p>
    </div>
    <div class="item">
        <h3>4</h3>
        <p></p>
        <p></p>
    </div>
    <div class="item">
        <h3>5</h3>
        <p></p>
    </div>
</div>

何が間違っているのかわからない！助けてください！