jquery - jQuery masonry how to call layoutComplete

Question

I have the following function:

namespace.utils.pageReorder(feed, function() {
     console.log('complete');
     // do some stuff here no reorder has completed
});

-------------

pageReorder: function(feed, callback) {

    feed.masonry('reloadItems');
    feed.masonry('layout');

    callback();

},

What i need to be able to do is to only call the callback once the masonry layout has completed. I know masonry has the following method but im not sure how to integrate it into my function.

msnry.on( 'layoutComplete', function() {
  console.log('layout is complete, just once');
  return true;
});

Thanks Pete

Answer 1

pageReorder: function(feed, callback) {

    feed.masonry('reloadItems');
    feed.masonry('layout');

    feed.on( 'layoutComplete', function() {
       callback();
    });
},

这应该可行，根据经验，砌体的 layoutComplete 并不总是可信的。

Answer 2

在布局之前注册事件侦听器时，我发现它工作最可靠。

假设 feed 是一个 jquery 元素：

feed.masonry({
  isInitLayout: false,
  transitionDuration: 0,});
var msnry = feed.data('masonry');

msnry.on( 'layoutComplete', function() {
  console.log('layout is complete, just once');
});
msnry.layout();