У меня есть этот код ниже, где я пытаюсь использовать Instafeed и Masonry вместе. Все работает нормально, пока я не нажму кнопку «Загрузить еще». Затем макет масонства ломается. Вероятно, это потому, что что-то загружается раньше другого или наоборот. Я новичок в этом, поэтому вся помощь будет принята с благодарностью.
Мне посоветовали использовать imagesLoaded вместо window.load, а также использовать добавленный метод. Но я не понимаю, как включить это в мой код.
Мой код находится в документе script.js и выводится в нижнем колонтитуле страницы после instafeed.js и каменной кладки.
$(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
});
});
Заранее спасибо за помощь! Дайте мне знать, если вам нужно от меня что-то еще.
Привет / Джеппе