javascript - masonry imagesLoaded, $(...).imagesLoaded 不是函数

Question

我已经查看了与此处类似的问题，但仍然无法弄清楚我的问题。我在一个网站上有几张图片，我想以砖石风格订购。但是，有时它们会相互堆叠，因此我尝试添加 imagesLoaded 函数，但出现错误:$(...).imagesLoaded 不是函数。

这是我在 html 代码中的链接脚本

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="mymasonry.js"></script>

这里是我想要显示的图片:

<div class="container">
        <div class="row centered mt mb">

            <div class="col-lg-4 col-md-4 col-sm-4 gallery post">
                <img src="images/a1.jpg" class="img-responsive">Size:  x <br> Title: </div>
                <div class="col-lg-4 col-md-4 col-sm-4 gallery post">
                <img src="images/a2.jpg" class="img-responsive">Size:  x <br> Title: </div>
                <div class="col-lg-4 col-md-4 col-sm-4 gallery post">
                <img src="images/a3.jpg" class="img-responsive">Size:  x <br> Title: </div>
                <div class="col-lg-4 col-md-4 col-sm-4 gallery post">
                <img src="images/a4.jpg" class="img-responsive">Size:  x <br> Title:</div>
                <div class="col-lg-4 col-md-4 col-sm-4 gallery post">
                <img src="images/a5.jpg" class="img-responsive">Size:  x <br> Title:</div>
            </div>

        </div>

这里是我要使用的 masonry 和 imagesLoaded javascript 代码。

$(document).ready(function(){

$('.container').imagesLoaded(function(){

$(function(){

    var m = new Masonry($('.centered').get()[0], {
        itemSelector: ".post"
    });

})
})
});

我做错了什么？我正在链接 imagesLoaded javascript。为什么我会收到错误消息？

Answer 1

您缺少核心砌体库。此外，我建议将所有脚本移动到结束正文标记的正上方。现在你有一个旧版本的 jquery 和一个 bootstrap.js 脚本。我在下面重构了您的脚本依赖项。剪切并粘贴它们并替换页面底部的两个脚本，然后从您的头脑中删除脚本。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="mymasonry.js"></script>