// You start with array with "n" items and x item per row
let n = 10; let x = 3;
let flat_list = Array(n).map((_,index) => `n${index+1}`) // ['n1', 'n2', ...]
// Calculate number of rows need to be render
let number_of_rows = Math.floor(n/x) + 1;
// Render a row
return Array(number_of_rows).map((_,rowIndex)=>{
// Check row is odd or even
let rowIsOdd = rowIndex % 2 === 1;
// Get data for row.
let row_data = flat_list .slice(rowIndex * x, (rowIndex + 1) * x);
// Filling data
if (cols.length < perRow) cols = [...cols, ...Array(perRow - cols.length)];
// Reverse data when row is odd
if (rowIsOdd) row_data = row_data.reverse();
// Render each item in row
return Array(x).map((_,colIndex)=>{
// Get your data
let data = row_data[colIndex];
// Render your item
return <div>{data}</div>;
})
})
1条答案
按热度按时间lf5gs5x21#
这个想法是把你的数组分解成许多更小的数组,每个数组都是1行,每一行都有条件地颠倒位置。
n=10
和x=3
一起使用anbox示例,其中某些样式组件包括箭头 *