映射一个数组，但每次放置 X 数量的项目

Question

我正在使用 Tailwind、React 和 GSAP 创建客户徽标网格。客户端徽标路径通过 json 文件加载。客户端徽标列表很长，所以我认为每隔几秒让每个网格跨度 ('cells') 中的图像淡化为不同的图像会很有趣。

到目前为止，我的解决方案是通过所有徽标进行映射，并在移动到下一个 col 范围之前将一定数量的徽标绝对堆叠在一起，然后使用 col 的 id 将它们动画化。 -跨度。我无法全神贯注于这种方法。尤其是负责任地更改网格列。

到目前为止的方法（一些伪代码一些irl代码）：

const maxCols = 4
const maxRows = 3
const itemsPerRow = Math.floor( logosList.length()/maxCols/maxRows)
const isExtra = () =>{
     if(logosList.length() % itemsPerRow >0) return true
     else return false
}
const numRows = Math.floor( logosList.length()/maxCols )



export default function ClientImages(){
     useEffect(() => {
          for(i = 0; i <= i/maxCols/maxRows; i++  )
               // to be figured out gsap method
               gsap.to(`img-${i}`, {animate stuff})
     },);
     
     function setLogos(){
          let subset
          for ( index = 0; index == maxCols * maxRows; index++ ){
               if(isExtra){
                    subset = logosList.slice(index, itemsPerRow + 1) 
               }
               else subset = logosList.slice(index, itemsPerRow) 
               return(
                    <div className="col-span-1 relative" id={`clientColSpan-${index}`}>
                    {subset.map((logo) => {
                         <Image className='absolute' src={logo.src} yada yada yada />
                    })}
                    </div>
               )
          }
          
     }
     return(
          <div className="grid grid-cols-2 md:grid-cols-4 2xl:grid-cols-6">
               {setLogos}
          </div>
     )

}

这是我的思维过程的直观表示

Answer 1

这是我根据您的视觉表现得出的解决方案。

创建网格

由于我们需要为桌面和移动设备提供两种不同的网格，因此最好有一个专门完成这项工作的函数。

// spread images to grid
const createGrid = (images, col, row) => {
  const totalItems = images.length;
  const totalCells = col * row;
  const itemsInCell = Math.floor(totalItems / totalCells);
  let moduloItems = totalItems % totalCells;

  // create grid
  const grid = [];
  for (let i = 0; i < totalCells; i++) {
    let cell = [];
    for (let j = 0; j < itemsInCell; j++) {
      const index = i * itemsInCell + j;
      cell.push(images[index]);
    }

    grid.push(cell);
  }

  // handle modulo items
  while (moduloItems > 0) {
    grid[totalCells - 1].push(images[totalItems - moduloItems]);
    moduloItems--;
  }

  return grid;
};

const images = [1,2,3,4,...,37];
cosnt grid = createGrid(images, 2, 3); // [ [1,2,3,4,5,6], [7,8,9,10,11,12], ... [] ]

createGrid() 将 return 一个网格单元格数组，每个单元格将包含一些符合您期望的项目。使用此网格单元格数组，您有足够的数据来创建 HTML.

处理响应式网格

使用提供的网格数组，我们可以根据 window 的宽度创建响应式 HTML 网格布局。

const createHTMLFromGrid = gridArray =>{// your function for HTML};

let html =
  window.innerWidth > 1024
    ? createHTMLFromGrid(createGrid(images, 2, 3))
    : createHTMLFromGrid(createGrid(images, 4, 3));

// append the HTML to your DOM
$(html).appendTo("body");

您还可以根据 window 调整大小事件更改网格。准备好 HTML 后，您就可以播放 GSAP 动画了。

见CodePen

映射一个数组，但每次放置 X 数量的项目

Map an array, but place X amount of items each pass

javascript

reactjs

gsap

next.js

tailwind-css