砌体网格：Instagram API + MacyJS - Javascript 问题答案

【问题标题】：Masonry Grid : Instagram API + MacyJS - Javascript problem砌体网格：Instagram API + MacyJS - Javascript 问题
【发布时间】：2019-03-07 09:23:41
【问题描述】：

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

有人可以帮助我吗？ :)

谢谢！

【问题讨论】：

可能的问题是图像尚未加载。您应该等到 api 将返回所有必需的图像，然后才实例化 Macy.js。例如，将 Macy.js 的实例化代码放入 mishaProcessResult 函数中，在 for 循环之后
我不敢相信我没有弄清楚.. 非常感谢！
有效吗？我可以添加答案，您会批准并投票吗？
是的，绝对！ :)

标签： javascript instagram-api masonry

【解决方案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
  });
}
...

或者，在 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();
}
...

【讨论】：