带有imagesLoaded

Question

我创建了一个包含一些图像或文本的砖石网格。我使用masonry.desandro作为砌体网格。到目前为止，我为这些项目设置了修复高度。例如，带有文本的项目：200px和带有图像的项目：300px。

但我想删除这些修复高度。对于只有文本的项目，砌体网格仍然可以正常工作。但我对包含图像的项目存在问题。带图像的项目重叠。我在砌体网站上看到，我必须使用imagesLoaded来加载图像后初始化网格。

  // Initialize masonry-layout
  initMasonry() {
    this.masonry = new Masonry('.container', {
      itemSelector: '.item',
      columnWidth: '.item',
    });
  }

  getPosts() {
        API call (get text and images for the items)
        ...
        ...
       let grid = document.querySelector('.container');
       imagesLoaded( grid ).on( 'progress', function() {
          // layout Masonry after each image was loaded
          this.masonry.reloadItems();
          this.masonry.layout();
       });
  }
  componentDidMount() {
    // Show the loading screen
    this.props.isLoading(true);
    // Fetch posts from API
    this.getPosts();
    this.initMasonry();
  }

我已将imagesLoaded添加到函数getPosts（）中。但现在我收到一条错误消息： TypeError：无法读取未定义的属性'reloadItems'

感谢您的帮助:)！