0

以下に、Instafeed と Masonry を一緒に使用しようとしているコードを示します。「もっと読み込む」ボタンをクリックするまで、すべて正常に動作します。次に、組積造のレイアウトが壊れます。おそらく、何かが他のものよりも先にロードされているか、その逆です。私はこれが初めてなので、すべての助けをいただければ幸いです。

window.load の代わりに imagesLoaded を使用し、追加されたメソッドを使用するためのヒントを得ました。しかし、それを自分のコードに組み込む方法がわかりません。

私のコードは 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
    });

});

よろしくお願いします。他に何か必要なことがありましたらお知らせください。

チアーズ / ジェッペ

4

1 に答える 1

0

Masonry がロードされる前に要素を処理しようとしているという点で、あなたは正しいです。.masonry('appended', $items)インスタフィードのafterイベントに入れることができます。Instafeed の開発者はこの修正を投稿しました:

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

于 2014-08-14T18:26:58.010 に答える