Masonry Grid: Instagram API + MacyJS - проблема с JavaScript

Question

Я пытаюсь создать сетку, похожую на кирпичную кладку, используя Macy.js и API Instagram.

У меня проблема, сетка появляется только при изменении размера окон.

Если страница загружается только, сетка не будет отображаться.

Загрузка страницы:

После изменения размера окна:

Код:

HTML

<div id="container">
  <div id="macy-container">
  </div>
</div>

Javascipt

<script>
  /* Macy.js init */
  var macy = Macy({
    container: '#macy-container',
    trueOrder: false,
    waitForImages: false,
    margin: 24,
    columns: 4,
    breakAt: {
      1200: 4,
      940: 3,
      520: 2,
      400: 1
    }
  });

  /*Instagram API - Images */
  var token = 'MY-TOKEN',
      num_photos = 20, // maximum 20
      containerFeed = document.getElementById( 'macy-container' ), // it is our <ul id="rudr_instafeed">
      scrElement = document.createElement( 'script' );

  window.mishaProcessResult = function( dataFeed ) {
    for( x in dataFeed.data ){
      var date = new Date(dataFeed.data[x].created_time*1000);
      var dateFormat = date.toLocaleString();
      // var imgDay = date.get
      // var imgMonth
      // var imgYear
      containerFeed.innerHTML += '<div class="demo"><img src="' + dataFeed.data[x].images.standard_resolution.url + '"></div>';
    }
  }

  scrElement.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + token + '&count=' + num_photos + '&callback=mishaProcessResult' );
  document.body.appendChild( scrElement );
</script>

Кто-нибудь может мне помочь?:)

Спасибо!

Answer 1

Проблема в том, что когда вы создаете экземпляр Macy.js, изображения еще не загружены. Вам следует подождать, пока API вернет все необходимые изображения, и только после этого создайте экземпляр Macy.js. Например, поместите код создания экземпляра Macy.js в функцию mishaProcessResult после цикла for.

...
window.mishaProcessResult = function( dataFeed ) {
  for( x in dataFeed.data ){
    ...
  }

  /**
   * Instantiate Macy.js inside the API's callback function,
   * after required images are returned by API, and attached to the DOM.
   */
  Macy({
    // options
  });
}
...

Или используйте метод Macy.js reInit внутри функции обратного вызова API:

...
// Init Macy.js
const macy = Macy({
  // options
});

window.mishaProcessResult = function( dataFeed ) {
  for( x in dataFeed.data ){
    ...
  }

  /**
   * Reinitialises the current macy instance
   */
  macy.reInit();
}
...