Макет кладки с изображениями - PullRequest
Новая
       32

Макет кладки с изображениями

0 голосов
/ 28 апреля 2018

Я создал кладочную сетку, которая содержит изображения или текст. Я использую 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' из неопределенного

Спасибо за вашу помощь:)!

...