使用imagesLoaded，但获取错误imagesLoaded不是一个功能

Question

我做了什么

• 将脚本标记包含在desandro docs
提供的CDN中
• 使用Isotope
围绕初始化网格包装imagesLoaded函数
• 更改了默认#container以匹配我的父容器，即.gifts
• 我的scripts.js
中的动态内容后的初始化同位素
• 过去，我还尝试使用iso.layout()
初始化网格后再次调用布局

目的

• .gift元素不应相互重叠

scripts.js中

// Dynamically loaded content
// Show all gifts
var giftsContainer = $("#posts-container");
var giftTemplate = $("#post-template").html();

gifts.forEach(function(gift) {
    var templateItem = $(giftTemplate);

    // Replace text with data from spreadsheet
    templateItem.find(".gift__image").attr("src", gift.ImageURL);
    templateItem.find(".gift__name").text(gift.Name);
    templateItem.find(".gift__price").text("$"+gift.Price);
    templateItem.find(".gift__description").text(gift.Description);

    // Add data attributes for sorting, cannot be place onto .gift
    templateItem.addClass(gift.CategoryFixed);
    templateItem.addClass(gift.Type);

    giftsContainer.append(templateItem);

    // Removes Amazon link for those that don't have one
    if (gift.URL !== "amazon.com") {
        templateItem.find(".btn--buy").css("display", "none");
    }

    if (gift.Price === "-") {
        templateItem.find(".gift__price").css("display", "none");
    }
});


$('.gifts').imagesLoaded( function() {
    var $grid = $('.gifts').isotope({
        itemSelector: '.gift',
        layoutMode: 'masonry',
        getSortData: {
            name: '.gift__name',
            price: '.gift__price',
        }
    });
});

的index.html

        <!-- Gift -->
        <div class="gift" data-id="">
            <!-- <a href="https://www.pinterest.com/pin/create/button/" data-pin-hover="true"></a> -->
            <img src="" data-original="" class="gift__image lazy">

            <p class="gift__name"></p>
            <p class="gift__price"></p>

            <p class=""><span class="gift__description"></span> <a href="" class="gift__link"></a></p>

            <p class="gift__category"></p>
            <p class="gift__type"></p>

<!--            <div class="group--share">
                <div class="gift__share">
                    <div class="gift__icons">
                        <a href="" class="link--twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a href="" class="link--facebook gift-facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                        <a href="" class="link--pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
                        <a href="" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a>
                    </div>
                </div> -->
                <a href="" target="_blank"><button class="btn btn--buy">Buy on Amazon</button></a>
            </div>
        </div> <!-- .gift -->