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

Question

Take a look at the images in this link

我正在使用相同的 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;
});