jquery - jQuery Masonry 回调不起作用

Question

我试图在 jQuery Masonry 完成其定位魔术时执行回调函数，以防止在我的代码中出现无样式内容。

但是，出于测试的目的，我使用了一个根本不调用的简单警报。

var $jigsaw = $('#jigsaw');

$jigsaw.imagesLoaded( function(){
    $jigsaw.masonry({
     columnWidth : 180,
      isAnimated : !Modernizr.csstransitions,
     isResizable : true,
    itemSelector : '.piece'
    }, function(){
        alert('Completed');
    });
});

我可能遗漏了一些明显的东西，但任何帮助将不胜感激

Answer 1

看起来 Masonry 与 jQuery 的延迟对象系统一起工作。如果您使用的是 jQuery 1.5+，这可能有效：

$.when($jigsaw.masonry(options)).then(function(){/*callback function*/});

Answer 2

Masonry v2.0 的回调没有记录，也不太受支持。

但是Isotope v1.5的回调很棒！如果您想要在过渡或动画结束后触发适当的回调，Isotope 是您的最佳选择。

原因是您可能正在使用 CSS 过渡或 jQuery 动画，或者两者都不使用。因此，我需要构建所有逻辑来检测正在使用哪个逻辑，然后何时触发实际回调。

Answer 3

// Create the callback function
var callback = function($el, cb) {
  var instance = $.data($el, 'masonry');
  if (!instance) {
    setTimeout(callback($el, cb), 300);
  } else {
    cb();
  }
}

// Then simply add this to your imagesLoaded for an element of '.thumbnails' or something
callback('.thumbnails', function() {
  // some code goes here
});

Answer 4

我试过了，它奏效了

jQuery.when( $jigsaw.masonry('reload') ).done(function(x) { 
    //call back logic 
});