时间戳

首页 > 解决方案 > 如何在一行中显示数组列表中的一定数量的项目

javascript - 如何在一行中显示数组列表中的一定数量的项目

问题描述

我正在使用 显示列表中的所有项目drivers2020.forEach(addLink);。
它们都显示在一行中，有没有办法设置一些项目，将显示在一行中，当达到该数量时，开始一个新的？

这是我的函数的样子：

drivers2020.forEach(addLink);

function addLink(driver, i) {
  const wrapper = document.createElement('div');
  wrapper.classList.add('wrapper');
  wrapper.style.width = "250px";
  wrapper.style.float = "left";
  const nameList = document.createElement('h2');
  nameList.id = `listOfNames`;
  nameList.textContent = driver.name;
  const driverImg = document.createElement('img');
  driverImg.src = driver.image;
  wrapper.appendChild(driverImg);
  wrapper.appendChild(nameList);
  list2020.appendChild(wrapper);
  nameList.addEventListener('click', function () {
    driverProfile(driver, this)
  });
}

标签： javascript

解决方案

使用现有代码执行此操作的最简单方法是使用CSS Grid：

#list2020 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

您可以通过在此处操作此行来调整列数：

grid-template-columns: repeat(3, 1fr);

const drivers2020 = [
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: 'Name',
    image: 'https://via.placeholder.com/150'
  }
];
const list2020 = document.getElementById('list2020');
drivers2020.forEach(addLink);

function addLink(driver, i) {
  const wrapper = document.createElement('div');
  wrapper.classList.add('wrapper');
  wrapper.style.width = "250px"; 
  wrapper.style.float = "left"; 
  const nameList = document.createElement('h2');
  nameList.id = `listOfNames`;
  nameList.textContent = driver.name;
  const driverImg = document.createElement('img');
  driverImg.src = driver.image;
  wrapper.appendChild(driverImg);
  wrapper.appendChild(nameList);
  list2020.appendChild(wrapper);
  nameList.addEventListener('click', function() {
  driverProfile(driver, this)
});
}
#list2020 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
<div id="list2020"></div>

推荐阅读