Question

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

我得到的提示是使用imagesLoaded而不是window.load，并使用appended method。但我不明白如何将其纳入我的代码。

我的代码在script.js doc中，并在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
    });

});

提前感谢您的帮助！如果您需要我更多信息，请告诉我。

Cheers / Jeppe

Answer 1

你纠正的是，砌体正在尝试使用元素，然后再加载元素。您可以将.masonry('appended', $items)放入Instafeed的after事件中。 Instafeed的开发者发布了此修复程序：

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

Instafeed和Masonry

1 个答案: