4

我正在使用Masonry和Embedly插件来显示嵌入的内容，我在这里整理了一个示例。

我的jQuery如下

//embedly

    $('.box').find('a').embedly({
      maxWidth: 260,
      wmode: 'transparent',
      method: 'after',
      chars: 50,
      width: 260,
      key:':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
    });


//masonry

   var $container =  $('#main-container');

    $container.imagesLoaded( function(){
        $container.masonry({
          itemSelector: '.box',
          isAnimated: true,
          isFitWidth: true
      });
    });

似乎 Masonry 插件首先加载并导致重叠问题（它们仅在您调整结果窗口大小时正确显示）我读过我可以使用回调函数或在嵌入完成渲染内容后重新触发 Masonry，但我不知道该怎么做。你能帮助我吗？有没有其他解决方案来解决这个问题？

4

2 回答 2

2

你有一个异步计时问题。砌体布局代码在内容有机会加载之前触发。

因此，您要做的是等待调用 masonry，直到加载完所有内容。您可能很想使用超时，这往往会导致竞争条件。

理想情况下，embedly 会有更好的 API 并以 ajax 调用的方式返回某种延迟的承诺对象。不幸的是，似乎没有什么干净的，所以我们必须做一些手架。

如果你定义了一个成功：回调，那么显然你必须自己插入内容。

幸运的是， embedly() 会在内容加载并显示后触发它自己的事件，您可以将回调绑定到该事件。

可能有很多更优雅的方法可以实现这一点，但为了使用丑陋的全局的简单示例，我们跟踪加载的内容片段的数量。每次嵌入事件触发表明已经加载了一段内容时，我们都会增加计数器。一旦我们达到匹配元素的总数，我们就知道所有内容都已加载，我们称之为 masonry。

虽然它不漂亮，但它可以工作：http: //jsfiddle.net/sJ5vc/

    //embedly
var matches = $('.box').find('a').length;
var loaded = 0;

// we call this from the embedly callback after all 
// content has been loaded.
function callMasonry() {
    var $container = $('#main-container');

    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.box',
            isAnimated: true,
            isFitWidth: true
        });
    });
}


var result = $('.box').find('a').embedly({
    maxWidth: 260,
    wmode: 'transparent',
    method: 'after',
    chars: 50,
    width: 260,
    key: ':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
}).bind('embedly-oembed', function(e, oembed) {

    // not as elegant as I would like but increment
    // the counter. Once we have gotten to 
    // the number of matches call masonry
    //
    // It would be much cleaner if embedly could return some kind
    // of deferred object that gets resolved after all matched
    // content has been loaded. 

    loaded++;

    console.log("loaded " + oembed.title);

    if (loaded == matches) {
        callMasonry();
    }


});;
于 2012-11-05T02:32:49.440 回答
0

您可以使用 JQuery 加载函数为通过 embedly (with class="box") 更新的 div 包装砌体代码，如下所示：

//masonry
 $('.box').load(function(){
       var $container =  $('#main-container');

        $container.imagesLoaded( function(){
            $container.masonry({
              itemSelector: '.box',
              isAnimated: true,
              isFitWidth: true
          });
        });
​ });​
于 2012-10-29T23:07:42.427 回答