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

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

1 个答案: