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

您缺少核心砌体库。此外，我建议将所有脚本移动到最终正文标记的上方。现在你有一个旧版本的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

我认为您需要在加载时触发的（document）.ready之外声明该函数。它目前的方式是，你将函数（加载器代码）传递给一个尚未声明的函数的回调函数。

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

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

masonry imagesLoaded，$（...）。imagesLoaded不是一个函数

2 个答案: