如何将 jquery masonry 与可嵌入的推文（iframe）一起使用答案

【问题标题】：how to use jquery masonry with embed-able tweets (iframes)如何将 jquery masonry 与可嵌入的推文（iframe）一起使用
【发布时间】：2014-08-07 12:44:04
【问题描述】：

我正在尝试将 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 }

服务器端我使用 node.js 和 express

【问题讨论】：

当您有一个带有 html 的 json 时，为什么要使用 iframe？只需为每个 json 条目创建新的 div 并将 "html" 内容附加到它。
这就是我正在做的，html 元素中的 javascript 拉入 iframe
在调用砌体之前，我需要一种方法来计算所有 iframe 的高度

标签： javascript jquery iframe twitter masonry

【解决方案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();
    });
});

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

【讨论】：

您能概括一下这段代码的作用吗？它从何而来？有相关文件吗？
第一部分是 twitter 库，第二部分是关于将事件（我们的砌体重新布局）附加到小部件的“加载”事件。

【解决方案2】：

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

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

编辑：

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

【讨论】：

如何检查每个帧何时加载？或者当最后一个 I 帧已加载时
编辑答案以回答您的问题
我注意到代码块可以使用关闭 ); - 对我来说编辑太小了。