javascript - masonry 网格 : Instagram API + MacyJS - Javascript problem

Question

我正在尝试使用 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>

有人能帮帮我吗？ :)

谢谢!

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();
}
...