Блог

Главная - Вопросы по программированию - Как преобразовать скрипт masonry JS в React?

Как преобразовать скрипт masonry JS в React?

#javascript #reactjs #masonry

#javascript #reactjs #masonry

Вопрос:

Может ли кто-нибудь помочь мне преобразовать скрипт masonry JS, ссылка на который приведена в разделе кода ниже, для использования в приложении react?

CodePen — CSS Grid Masonry

 function resizeGridItem(item){
  grid = document.getElementsByClassName("grid")[0];
  rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
  rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
  rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height rowGap)/(rowHeight rowGap));
    item.style.gridRowEnd = "span " rowSpan;
}

function resizeAllGridItems(){
  allItems = document.getElementsByClassName("item");
  for(x=0;x<allItems.length;x  ){
    resizeGridItem(allItems[x]);
  }
}

function resizeInstance(instance){
    item = instance.elements[0];
  resizeGridItem(item);
}

window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);

allItems = document.getElementsByClassName("item");
for(x=0;x<allItems.length;x  ){
  imagesLoaded( allItems[x], resizeInstance);
}

Я начинаю с приложения react и хотел бы получить небольшую помощь, пожалуйста…

Заранее спасибо, большое вам спасибо.

С наилучшими пожеланиями

Комментарии:

1. Можете ли вы попробовать использовать эту библиотеку, npmjs.com/package/react-responsive-masonry ?

2. @DatHo, привет, спасибо за твой ответ. Этот модуль masonry не делает то, что я хочу. Мне нужна кладка, основанная на наименьшей высоте столбца, как в приведенном примере.

Ответ №1:

Для получения информации я нашел библиотеку «react-masonry-component», которая делает именно то, что я хочу.