與圖像重疊的砌體div加載插件

我有砌體插件和圖像加載插件，它似乎imagesloadedloaded無法正常工作。當我刷新頁面divs重疊。只有在調整瀏覽器窗口大小後，重疊纔會自行修正。有時在清爽的時候它看起來確實有效......它非常隨意。我是一個jQuery和JavaScript的新手。與圖像重疊的砌體div加載插件

我主持了一個HTML頁面，你在這兒可以看到我在談論：masonry test

這裏是我如何初始化，但你可以看到完整的代碼，如果你看的源代碼因爲問題可能在別處。

$(document).ready(function() { 

    // Initialize Masonry 
    $('#content').masonry({ 
     columnWidth: 320, 
     itemSelector: '.item', 
     isFitWidth: true, 
     isAnimated: true, 
    }).imagesLoaded(function() { 
     $(this).masonry('reload'); 
    }); 
});

來源

2015-06-12 Dashiell Rose Bark-Huss

問題是在砌體插件完成初始化之前調用了imagesLoaded()。如果您在測試頁面上查看瀏覽器控制檯，則會看到一個錯誤。

查看開發人員站點上的example，瞭解如何使用imagesLoaded與磚石結合在一起。您應該等到圖像加載完成後才能初始化砌體，而不是鏈接功能。

$('#content').imagesLoaded(function() { 
    $('#content').masonry({ 
     columnWidth: 320, 
     itemSelector: '.item', 
     isFitWidth: true, 
     isAnimated: true, 
    }); 
});

您可能能夠做到這一點您最初嘗試（即鏈接的方法），但你不能在你的imagesLoaded功能使用$(this)。這個函數是一個回調函數，所以它不會被同步執行。如果您將您的功能更改爲

$('#content').masonry('reload');

它可能以您想要的方式工作，但我沒有測試過。

來源

2015-06-12 17:53:40 Vince

是的，修復它，謝謝。我已經從演示中獲得初始化代碼，該演示使用了包含imagesLoaded的舊砌體插件，而不像那些需要單獨鏈接這些imagesLoaded插件的新插件。也許這就是爲什麼它是這樣寫的。 –

與圖像重疊的砌體div加載插件

回答

相關問題