Ajax调用后砌体未正确初始化

Question

我正在使用此插件来设置网格画廊。 该图库显示X张图片。 在ajax调用之后，这些图像被加载到HTML中：

$.ajax({
    type:"POST",
    dataType:"html",
    contentType:"application/x-www-form-urlencoded",
    url:url,
    data:data,
    success:function(response) {

       $("#masonry-container").html('<div id="content">'+response+'</div>');
       initialiceMasonry();

    }
    ,timeout:10000
});

如您所见，附加服务器响应后，它将调用initialiceMasonry();

var container = $("#content");

container.masonry({
    columnWidth:190,
    itemSelector:".item",
    gutter:8,

});

初始化之后，图像显示为重叠，在寻找与此插件有关的另一个问题时，我找到了使用imagesLoaded的选项，但它向我返回了此错误：

Uncaught TypeError: undefined is not a function 

并选择我称之为imagesLoaded的行

从服务器我得到这个HTML ：

    <div class="item" data-id="160">

        <img src="image_1.jpeg" />

        <div class="options">
            <h4>Section 1</h4>
            <a href="section_1.php">Section 1</a>
        </div>

    </div>

如何正确初始化砌体以解决重叠的问题？

Answer 1

好吧，我认为您可以使用此插件的reload回调，因此在ajax的成功函数中，您可以调用initialiceMasonry（）函数，该函数如下所示

function initialiceMasonry(){
    var $container = $('#masonry-container');        
        $container.imagesLoaded(function() {               
            $container.masonry('reload');
            $container.masonry({
                isInitLayout : true,
                itemSelector: '.mason_jar_item'
            });
        });