javascript - 如何将 jquery masonry 与可嵌入推文 (iframe) 结合使用

Question

我正在尝试将 Masonry 与多个可嵌入推文一起使用。但我遇到了元素相互重叠的问题。

我尝试的一种方法是按照引用指南使用 imagesLoaded 插件，但这不起作用，因为我认为每条推文的 iframe 尚未完全加载。

我尝试仅在页面加载时调用 masonry，但仍然存在推文重叠的问题。

$(window).bind("load", function() {

    var $container = $('#panel');
    $container.masonry({
      columnWidth: 300,
      itemSelector: '.elem'
    });
});

我不知道该怎么做，有没有办法在将可嵌入推文发送给客户端之前计算出它的高度，以便我可以将其设置为 iframe 的内联样式。这是从 twitter API 返回的 JSON 数据。

=============statuses/oembed============

    { cache_age: '3153600000',
      url: 'https://twitter.com/Cristiano/statuses/477052670197653504',
      height: null,
      provider_url: 'https://twitter.com',
      provider_name: 'Twitter',
      author_name: 'Cristiano Ronaldo',
      version: '1.0',
      author_url: 'https://twitter.com/Cristiano',
      type: 'rich',
      html: '<blockquote class="twitter-tweet"><p>Insane first half against the aliens! <a href="https://twitter.com/FALCAO">@Falcao</a>, we&#39;ll show them how we play football! <a href="https://twitter.com/search?q=%23GALAXY11&amp;src=hash">#GALAXY11</a> <a href="http://t.co/z0FzRHz6gG">http://t.co/z0FzRHz6gG</a> <a href="http://t.co/pGJ4F1AcO0">pic.twitter.com/pGJ4F1AcO0</a></p>&mdash; Cristiano Ronaldo (@Cristiano) <a href="https://twitter.com/Cristiano/statuses/477052670197653504">June 12, 2014</a></blockquote>\n<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>',
      width: 550 }

服务器端我正在使用带有express的node.js

Answer 1

window.twttr = function (d, s, id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, 'script', 'twitter-wjs');

twttr.ready(function (twttr) {
    twttr.events.bind('loaded', function (event) {
        //DO A MASONRY RELAYOUT HERE
        msnry.layout();
    });
});

到目前为止，这对我来说效果很好。