砌体根本不影响页面

Question

我正在AngularJS和Masonry的网站上工作，即使我认为我正确地初始化了Masonry，Javascript文件根本不会改变页面的布局。我对砌体非常陌生，所以我猜测我刚刚初步化错了什么。

初始化HTML：

<script src="js/masonry-init.js"></script>

相关HTML：

<div class="blog-entry-grid">
            <div class="blog-grid-sizer"></div>
            <div class="blog-gutter-sizer"></div>
            <article ng-repeat="posts in bposts" class="blog-grid-item">
                <header class="entry-header blog-entry-header">

                    <div class="entry-data">
                        <span class="posted-on">
                            <a ng-href="/../BlogPosts/{{posts.ID}}.html" rel="bookmark">
                                <time class="entry-date published updated" datetime="2015-08-20T02:48:02+00:00">{{posts.ID}}</time>
                            </a>
                        </span>

                    </div>
                    <h1 class="entry-title"><a ng-href="/../BlogPosts/{{posts.ID}}.html" rel="bookmark">{{posts.Title}}</a></h1>    </header><!-- .entry-header -->


                <div class="entry-content">
                    <p>{{posts.Summary}}<a class="read-more" ng-href="/../BlogPosts/{{posts.ID}}.html">Continue reading</a></p>
                </div><!-- .entry-content -->
            </article><!-- #post-## -->
        </div>

相关style.css

.blog-entry-grid {
}
.blog-gutter-sizer {
  width: 15%;
}
.blog-grid-sizer,
.blog-grid-item { 
    width: 300px; }

.blog-grid-item {
    float: left;
    background: #FFF;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    margin-bottom: 30px;
}

砖石-init.js

$(document).ready(function () {

    $('.blog-entry-grid').masonry({
        itemSelector: '.blog-grid-item',
        columnWidth: '.blog-grid-sizer',
        gutter: '.blog-gutter-sizer',
        percentPosition: true
    })

});