如何将含40个元素的动态数组拆分为4列，每列10个<li>元素？

第一步：编写基础CSS布局 #

先搭建Flex布局的样式结构，父容器使用flex布局，4个子容器各占25%宽度，内部列表清除默认样式：

/* 父Flex容器 */
.flex-container {
  display: flex;
  gap: 1rem; /* 可选：容器间的间距 */
  flex-wrap: wrap; /* 适配小屏幕自动换行 */
}

/* 子容器，每个占25%宽度 */
.flex-item {
  flex: 25%;
  box-sizing: border-box; /* 避免padding/margin撑大宽度 */
  padding: 0.5rem;
}

/* 列表样式重置 */
.flex-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 列表项样式，可根据需求调整 */
.flex-item li {
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  border: 1px solid #eee;
}

第二步：编写JavaScript分块渲染逻辑 #

核心思路是先把40个元素的数组分成4组（每组10个），再遍历每组生成对应的DOM结构：

// 假设这是你的动态数组，每次渲染时内容会更新
const dynamicArray = Array.from({ length: 40 }, (_, i) => ({
  id: i + 1,
  content: `元素内容 ${i + 1}`
}));

// 数组分块工具函数：将数组分成指定大小的子数组
function chunkArray(arr, chunkSize) {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
}

// 渲染函数
function renderItems() {
  // 获取父容器，假设页面中有id为"flexContainer"的元素
  const flexContainer = document.getElementById('flexContainer');
  // 清空容器，避免重复渲染
  flexContainer.innerHTML = '';

  // 将数组分成4组，每组10个元素
  const itemChunks = chunkArray(dynamicArray, 10);

  // 遍历每组，生成DOM元素
  itemChunks.forEach(chunk => {
    // 创建子容器div
    const flexItem = document.createElement('div');
    flexItem.classList.add('flex-item');

    // 创建列表ul
    const list = document.createElement('ul');

    // 遍历当前组的元素，生成li
    chunk.forEach(item => {
      const listItem = document.createElement('li');
      // 这里替换成你需要展示的数组对象内容，比如item.content或其他属性
      listItem.textContent = item.content;
      list.appendChild(listItem);
    });

    flexItem.appendChild(list);
    flexContainer.appendChild(flexItem);
  });
}

// 调用渲染函数，页面加载或数组更新时执行
renderItems();

关键说明 #

• 数组分块使用slice方法按顺序截取，只要原数组无重复，分块后的元素就不会重复。
• 每次渲染前清空父容器innerHTML，避免旧内容残留。
• 样式中的box-sizing: border-box保证子容器的25%宽度不会被内边距或边框撑大。
• 可根据实际需求调整列表项的内容渲染方式（比如插入图片、链接等）。

内容的提问来源于stack exchange，提问作者Enza