как использовать jquery masonry с встраиваемыми твитами (iframes)

Я пытаюсь использовать Masonry с несколькими встраиваемыми твитами. Но я столкнулся с проблемой наложения элементов друг на друга.

Один метод, который я пробовал, заключался в использовании плагина imagesLoaded в соответствии со справочным руководством, но это не сработало, так как я не думаю, что iframe каждого твита не полностью загружен, я думаю.

я пытался вызвать каменную кладку только тогда, когда страница загружена, но у меня все еще есть проблема с перекрытием твитов.

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

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

Я не знаю, что делать, есть ли способ определить высоту встраиваемого твита, прежде чем отправить его клиенту, чтобы я мог установить его как встроенный стиль iframe. вот данные JSON, возвращенные API Twitter.

=============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 с экспрессом


javascript iframe jquery twitter masonry
person molleman    schedule 17.06.2014    source источник
comment
Почему вы используете iframe, когда у вас есть json с html? Просто создайте новый div для каждой записи json и добавьте к нему содержимое "html".   -  person Ingmars    schedule 17.06.2014
comment
это то, что я делаю, javascript внутри элемента html вытягивает iframe   -  person molleman    schedule 17.06.2014
comment
мне нужен метод, чтобы определить высоту всех фреймов, прежде чем я вызову каменную кладку   -  person molleman    schedule 17.06.2014

Ответы (2)


arrow_upward
7
arrow_downward 

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

Это работало хорошо для меня до сих пор.

person Emre    schedule 22.12.2014
comment
Не могли бы вы описать, что делает этот код? Откуда это взялось? Любая документация по нему? - person imrek; 27.02.2015
comment
первая часть — это библиотека твиттера, вторая часть — о присоединении события (наша релейная кладка) к «загруженному» событию виджетов. - person Emre; 01.03.2015

arrow_upward
1
arrow_downward

Вы можете выполнить jquery для каждого из ваших элементов «.elem» после загрузки ваших iframe, найти iframe внутри, получить высоту и установить высоту .elem на высоту iframe, а затем запустить кладку.

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

РЕДАКТИРОВАТЬ:

В зависимости от того, как вы загружаете свои фреймы, если вы используете jquery ajax, вы можете легко добавить к своим обратным вызовам полный, успех или .done().

person Steve    schedule 17.06.2014
comment
Как проверить, когда загрузился каждый кадр?? Или когда последний I-кадр загрузился - person molleman; 17.06.2014
comment
Отредактированный ответ, чтобы ответить на ваш вопрос - person Steve; 17.06.2014
comment
Я заметил, что блок кода может использовать закрывающий ); - это слишком маленькая правка для меня. - person calebtr; 01.07.2015