我在下面有这段代码,我试图将 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
});
});
在此先感谢您的帮助!让我知道您是否还需要我做任何事情。
干杯/杰普