Question

我正在使用jQuery瀑布进行网格样式显示。

要停止常见图像重叠问题，我已将瀑布方法包装在.load（）函数中，例如：

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

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

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

附加项目后，图像重叠。 jQuery瀑布带有一个'reflow＆＃39;重新排序容器内所有项目的函数。

在我的ajax成功中，我这样运行：

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

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

有没有办法只能在项目完全加载后运行瀑布（＆＃39; reflow＆＃39;）。与：

的风格相同

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

我已经尝试将项目附加到此函数中的行包装，我也尝试添加项目，然后在.load函数中应用reflow，但这两个都不附加任何项目。

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

注意：图像在FF中不重叠，但在chrome和safari中也是如此。

谢谢！

Answer 1

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

Answer 2

在您的成功函数中尝试此操作：

成功：功能（html）{

$("#buildcontainer").append(html);

var loaded = 0,
imgs = $("img"),
totalImgs = imgs.length;

imgs.load(function() {
    ++loaded;

    // Check if all images have loaded
    if (loaded === totalImgs) {
        // Run waterfall
        $('#buildcontainer').waterfall('reflow');
    }
});

}

Answer 3

假设所有图像都在这里添加：

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

然后，您可以在添加后对其进行全部监控：

success: function(html) {

  function checkCnt() {
      if (remainingCnt === 0) {
          $("#buildcontainer").waterfall('reflow');
      }
  }

  var remainingCnt = $("#buildcontainer").append(html)
    .find("img")
    .filter(function() { return !this.complete; })
    .load(function() {
        // one more is loaded now, see if they are all loaded
        --remainingCnt;
        checkCnt();
     }).length;
  checkCnt();
}

只适用于jQuery waterfall＆＃39; reflow＆＃39;图像加载后

3 个答案: