jQuery masonry how to call layoutComplete

问题

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

回答1:

pageReorder: function(feed, callback) {

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

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

This should work, by experience the layoutComplete of masonry cannot always be trusted.

回答2:

I found it working most reliable when registering the event listener before layouting.

Assuming feed is a jquery element:

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

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

来源：https://stackoverflow.com/questions/17503566/jquery-masonry-how-to-call-layoutcomplete