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'
            });
        });

在ajax调用之后，砌体没有正确初始化

1 个答案: