javascript - ajax 调用后 Masonry 未正确初始化

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>

如何正确初始化 Masonry 来解决重叠问题？

Answer 1

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

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