从本地计算机加载masonry.js会引发错误

Question

我正在尝试从本地计算机加载masonry.js文件，但它不起作用。到目前为止，我遇到了砌体的CDN链接，但是一旦我删除了CDN链接，就会抛出以下错误：

错误：

Uncaught TypeError: $(...).masonry is not a function
    at HTMLDocument.<anonymous> (gallery:229)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

代码：

<script src="{{ asset(mix('js/imagesloaded.pkgd.min.js')) }}"></script>
<script src="{{ asset(mix('js/masonry.pkgd.min.js')) }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
    // init Masonry
    var $grid = $('.grid').masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer'
    });
    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry();
    });
});
</script>

我多次检查过jquery是否设置正确，确实如此。您无法看到jQuery文件，因为它在另一个视图中我正在使用刀片模板。我不知道它会是什么。