javascript - jQuery Mosaic Flow，在我调整浏览器窗口大小之前，图像不可见

Question

看看这个链接中的图片

我正在使用相同的 Mosaic Flow 插件构建一个类似的页面，我的页面和上面的示例页面之间的唯一区别是我通过 AJAX 获取图像。

问题： ajax 调用后图像不可见。它们仅在我调整浏览器窗口大小或放大/缩小时才开始显示。ajax 调用工作正常，图像被检索并附加到正确的容器元素，并且 Mosaic Flow 正确运行（减去不可见部分）。一旦我调整了浏览器窗口的大小，插件就会完美地工作，调整大小并创建列，就像我提供的示例链接一样

这是我的ajax代码：

    var container = jQuery( "#container" );
    jQuery( "button#submit" ).on( "click", function(){
        jQuery.ajax({
            url: "/ajax/ajax_getimages.php",
            success: function( data ){
                container.html( data );
            },
            complete: function(){
                jQuery( "#image-container" ).mosaicflow( { 
                    itemSelector: ".item", 
                    minItemWidth: 300 
                });
            }
        });

        return false;
    });

是什么导致了这种不可见的行为，为什么它只在我使用 ajax 检索图像时发生，我该如何解决这个问题？

Answer 1

试试这个对我有帮助:)。

var container = jQuery( "#container" );
jQuery( "button#submit" ).on( "click", function(){
    jQuery.ajax({
        url: "/ajax/ajax_getimages.php",
        success: function( data ){
            container.html( data );
        },
        complete: function(){
            var mosaic = jQuery( "#image-container" ).mosaicflow( { 
                itemSelector: ".item", 
                minItemWidth: 300 
            });
           mosaic.mosaicflow('refill'); 
        }
    });

    return false;
});