映射一个数组，但每次传递 X 数量的项目答案

【问题标题】：Map an array, but place X amount of items each pass映射一个数组，但每次传递 X 数量的项目
【发布时间】：2022-01-24 20:15:27
【问题描述】：

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

到目前为止，我的解决方案是映射所有徽标并将一定数量的徽标堆叠在一起作为绝对值，然后再移动到下一个 col 跨度，然后使用 col-span 的 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>
     )

}

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

【问题讨论】：

标签： javascript reactjs next.js tailwind-css gsap

【解决方案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() 将返回一个网格单元格数组，每个单元格将包含许多符合您期望的项目。有了这个网格单元数组，您就有足够的数据来创建 HTML。

处理响应式网格

使用提供的网格数组，我们可以根据窗口的宽度创建响应式 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");

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

见CodePen

【讨论】：