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