1

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

4

2 回答 2

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

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

于 2014-12-22T10:15:00.087 回答
1

在 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()回调中。

于 2014-06-17T14:47:28.883 回答