0
240
VistasAsigne una matriz, pero coloque X cantidad de elementos en cada pasada
Estoy creando una cuadrícula de logotipos de clientes usando Tailwind, React y GSAP. Las rutas del logotipo del cliente se cargan a través de un archivo json. La lista de logotipos de clientes es bastante larga, por lo que pensé que sería interesante que las imágenes en cada columna de la cuadrícula ('celdas') se desvanecieran a una imagen diferente cada pocos segundos.
Mi solución hasta ahora es mapear todos los logotipos y apilar una cierta cantidad de ellos uno encima del otro como absolutos antes de pasar al siguiente intervalo de columnas y luego animarlos hacia adentro y hacia afuera usando las identificaciones de los intervalos de columnas. Tengo problemas para entender el enfoque. Especialmente con el cambio responsable de grid-cols.
El enfoque hasta ahora (algún pseudocódigo, algún código 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> ) }Aquí hay una representación visual de mi proceso de pensamiento.
1 Respuestas
Responde la pregunta0
Aquí está mi solución basada en su representación visual.
- Crear la cuadrícula
Como necesitamos dos cuadrículas diferentes para escritorio y móvil, es mejor tener una función que haga este trabajo específicamente.
// 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() devolverá una matriz de celdas de cuadrícula, cada celda contendrá una cantidad de elementos que cumplan con sus expectativas. Con esta matriz de celdas de cuadrícula, tiene suficientes datos para crear su HTML.
- Manejar la grilla receptiva
Con la matriz de cuadrícula proporcionada, podemos crear diseños de cuadrícula HTML receptivos basados en el ancho de la ventana.
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");También puede cambiar la cuadrícula según el evento de cambio de tamaño de la ventana. Una vez que tenga el HTML listo, puede jugar con la animación GSAP.
Ver CodePen