You have an asynchronous synchronization problem. The mockup layout code fires before the content has the ability to load.
So what you want to do is wait to trigger the masonry until all your content has loaded. You may be tempted to use a timeout, which will tend to cause race conditions.
Ideally, embedding will have a better API and return some kind of pending promise object like ajax calls do. Unfortunately, it seems that there is nothing clean, so we need to make some manual stands.
If you define success: a callback, then apparently you need to insert the content yourself.
Fortunately, embedly () fires its own event after loading and displaying content to which you can bind a callback.
There are probably many more elegant ways to achieve this, but for the purposes of a simple example using an ugly global, we track the number of pieces of content downloaded. Each time an embed event is triggered, a piece of content is indicated, we increase the counter. As soon as we reach the total number of matched elements, we know that all the contents are loaded, and we call the masonry.
While it is not handsome, it works: http://jsfiddle.net/sJ5vc/
//embedly var matches = $('.box').find('a').length; var loaded = 0; // we call this from the embedly callback after all // content has been loaded. function callMasonry() { var $container = $('#main-container'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', isAnimated: true, isFitWidth: true }); }); } var result = $('.box').find('a').embedly({ maxWidth: 260, wmode: 'transparent', method: 'after', chars: 50, width: 260, key: ':cd54253e69944ae18ad5ece38b4d0e1e' //temporal }).bind('embedly-oembed', function(e, oembed) { // not as elegant as I would like but increment // the counter. Once we have gotten to // the number of matches call masonry // // It would be much cleaner if embedly could return some kind // of deferred object that gets resolved after all matched // content has been loaded. loaded++; console.log("loaded " + oembed.title); if (loaded == matches) { callMasonry(); } });;