javascript - 仅在图像加载后应用 jQuery 瀑布 'reflow'

Question

我正在为我的网格样式显示使用 jQuery 瀑布。

为了解决常见的图像重叠问题，我将瀑布方法包装在 .load() 函数中，例如:

$(window).load(function(){
  $('#buildcontainer').waterfall({ 
    colMinWidth: 260, 
    defaultContainerWidth: 1000,
    autoresize: true
  });
});

图像重叠是因为在图像完全加载到那里之前调用了瀑布函数，因为无法确定它们的高度。将函数包装在加载函数中可以防止这种情况。

问题是，我有一个按钮，它通过 ajax 加载更多数据库结果并将它们附加到容器。

附加项目时，图像会重叠。 jQuery 瀑布带有“重排”功能，可对容器内的所有项目进行重新排序。

在我的 ajax 成功中，我像这样运行它:

success: function(html) {                   
  $("#buildcontainer").append(html).waterfall('reflow');
}

我在这里看到的问题是正在附加图像，然后调用瀑布函数但图像尚未完全加载。

有没有一种方法我只能在项目完全加载后运行瀑布('reflow')。与以下样式相同:

    $(window).load(function(){
    });

我试过将项目附加到此函数的行换行，我也尝试过只附加项目然后在 .load 函数中应用回流，但这两个都不附加任何项目。

关于下一步尝试的任何帮助/想法？谢谢!

注意:图片在 FF 中不重叠，但在 chrome 和 safari 中重叠。

谢谢!

Answer 1

查看imagesLoaded 库/jquery 插件:http://imagesloaded.desandro.com/