0

我在下面有这段代码,我试图将 Instafeed 和 Masonry 一起使用。一切正常,直到我单击“加载更多”按钮。然后砌体布局中断。这可能是因为某些东西在另一个之前加载,反之亦然。我是新手,因此将不胜感激所有帮助。

我得到了使用 imagesLoaded 而不是 window.load 以及使用 appended method 的提示。但我不明白如何将其合并到我的代码中。

我的代码在 script.js 文档中,并在 instafeed.js 和 masonry 之后的页面页脚中输出。

$(function () {
    var loadButton = document.getElementById('load-more');

    if(loadButton !== null) {
        var userFeed = new Instafeed({
          get: 'user',
          userId: xxxxxxxxx,
          accessToken: 'xxxxxxxxx',

          limit: 6,
          resolution: 'standard_resolution',
          template: '<div class="col30 grid image-top-fill instapic"><a href="{{link}}" title="Besök Instagram" class="" id="{{id}}"><img src="{{image}}" alt="Instagram" /></a> <p class="nomargin">{{caption}}</p></div>',
        after: function() {
            if (!this.hasNext()) {
                loadButton.setAttribute('disabled', 'disabled');
                Masonry.start();
            }
        }
    });

    loadButton.addEventListener('click', function() {
        userFeed.next();
    });
    userFeed.run();
}
});

$(window).load(function(){
    var container = document.querySelector('#instafeed');

    var msnry = new Masonry( container, {
      itemSelector : '.instapic',
      isAnimated : true,
      isFitWidth : false
    });

});

在此先感谢您的帮助!让我知道您是否还需要我做任何事情。

干杯/杰普

4

1 回答 1

0

您是正确的,因为 Masonry 正在尝试在加载元素之前使用它们。您可以.masonry('appended', $items)加入afterInstafeed 事件。Instafeed 的开发者发布了这个修复:

https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003

于 2014-08-14T18:26:58.010 回答