Javascript 如何将jquery砌体与可嵌入的tweets（iFrame）一起使用

我正在尝试使用砌体与多个可嵌入的推特。但我遇到了元素相互重叠的问题

我尝试过的一种方法是按照参考指南使用imagesLoaded插件，但这不起作用，因为我认为每条推文的iframe都没有完全加载

我试着只在页面加载时调用Mashise，但我仍然存在推文重叠的问题

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

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

我不知道该怎么办，有没有办法在发送给客户端之前计算出可嵌入推文的高度，以便将其设置为iframe的内联样式。下面是从twitterapi返回的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 }

---

服务器端我将node.js与express一起使用

您可以在加载iframe后对每个“.elem”元素执行jquery，找到内部的iframe，获取高度，并将.elem高度设置为iframe高度，然后运行

$('.elem').each(function(elem,index){
    var height = $(elem).find('iframe').height();
    $(elem).height(height);
});
//masonry reload here

编辑：

---

根据您加载iframe的方式，如果您使用jquery ajax，您可以轻松地添加到完整、成功或.done回调中。

您可以在加载iframe后对每个“.elem”元素执行jquery，找到内部的iframe，获取高度，并将.elem高度设置为iframe高度，然后进行砌筑

$('.elem').each(function(elem,index){
    var height = $(elem).find('iframe').height();
    $(elem).height(height);
});
//masonry reload here

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();
    });
});

编辑：

根据您加载iframe的方式，如果您使用jquery ajax，您可以轻松地添加到complete、success或.done回调中

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();
    });
});

到目前为止，这对我很有效

---

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

当html中有json时，为什么要使用iframe？只需为每个json条目创建新div并向其添加html内容。这就是我正在做的，html元素中的javascript会引入一个iframe我需要一个方法来计算所有iframe的高度，然后再调用Masonry为什么在html中包含json时要使用iframe？只需为每个json条目创建新的div并向其添加html内容。这就是我正在做的，html元素中的javascript会引入一个iFrame我需要一个方法来计算所有iFrame的高度，然后再调用Masonry如何检查每个帧何时加载？？或者，当最后一个I帧加载编辑答案以回答您的问题时，我注意到代码块可能会使用结束符；-对我来说，编辑太小了。如何检查每个帧何时加载？？或者，当最后一个I帧加载编辑答案以回答您的问题时，我注意到代码块可能会使用结束符；-这是一个太小的编辑我做。你能概述一下这段代码的作用吗？它来自哪里？有关于它的文档吗？第一部分是twitter库，第二部分是关于将我们的重新发布事件附加到小部件的“加载”事件。你能概述一下这段代码的作用吗？它来自哪里？有关于它的文档吗？第一部分是twitter库，第二部分是关于在小部件的“加载”事件上附加一个事件。