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

这是我想要使用的砖石和imagesLoaded的javascript代码。

$(document).ready(function(){

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

$(function(){

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

})
})
});

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

Answer 1

你错过了核心砖石库。另外，我建议将您的所有脚本移到end body标记的上方。现在，您有一个旧版本的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>

Answer 2

我认为您需要在加载时触发的(文档).ready之外声明函数。按照目前的方式，您正在将函数(加载程序代码)传递到一个尚未声明的函数的回调中。

$(document).ready(function()
{
   $('.container').imagesLoaded()
});

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