在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

好吧,我认为你可以使用这个插件的重载回调,所以在你的ajax成功函数中,你可以调用你的initialiceMasonry()函数,它看起来像这样

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