javascript - 砌体网格:Instagram API + MacyJS-Javascript问题

我正在尝试使用Macy.js和Instagram API做一个类似于砌体的网格。

我有一个问题，网格仅在窗口大小更改时出现。

如果仅加载页面，则不会显示网格。

页面加载：


调整窗口大小后：


代码：

的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>

有人可以帮助我吗？ :)

谢谢！

最佳答案

问题在于，当您实例化Macy.js时，图像尚未加载。您应该等待，直到API将返回所有必需的图像为止，并且仅在实例化Macy.js之后。例如，在mishaProcessResult循环之后，将Macy.js实例化代码放入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
  });
}
...

或者，在API的回调函数中使用Macy.js reInit方法：

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

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

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