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

Question

我正在尝试使用 Macy.js 和 Instagram API.

制作类似砖石结构的网格

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

如果页面只加载，网格将不会显示。

页面加载：

window 调整后：

代码：

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 将 return 所有需要的图像，然后才实例化 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();
}
...

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

Masonry Grid : Instagram API + MacyJS - Javascript problem

javascript

masonry

instagram-api