1

複数の埋め込み可能なツイートで Masonry を使用しようとしています。しかし、要素が互いに重なっているという問題に直面しています。

私が試した方法の 1 つは、リファレンス ガイドに従って imagesLoaded プラグインを使用することでしたが、各ツイートの iframe が完全に読み込まれていないと思われるため、うまくいきませんでした。

ページがロードされたときにのみ石工を呼び出そうとしましたが、ツイートが重複するという問題がまだあります。

$(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を使用しています

4

2 に答える 2

1

iframeがロードされた後、「.elem」要素に対してそれぞれjqueryを実行し、内部のiframeを見つけ、高さを取得し、.elemの高さをiframeの高さに設定してから、石積みを実行できます。

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

編集：

jquery ajax を使用している場合は、iframe の読み込み方法に応じて、完了、成功、または.done()コールバックに簡単に追加できます。

于 2014-06-17T14:47:28.883 に答える