Генерация динамических карт HTML-карт из массива Javascript и Bootstrap в разных строках и столбцах

Question

Я хочу создать раздел «Моя команда» с более чем одной строкой и 5 карточками в одной строке. Я хочу создать массив всех членов команды и выровнять его в вышеупомянутом формате. Но моя проблема в том, что я не могу выровнять карты в другом ряду, если один ряд заполнен 5 карточками.

Я сделал это вручную, создав 3 разных массива для 3 строк. Но я хочу сделать это, используя Single Array и Single Loop.

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  }
];

const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
    <div class="col-md-2 shadow p-3 mb-5 bg-white rounded ">
        <img src="${result.img}" height="150" width="150" alt="name">
        <h4>${result.name}</h4>
        <h6>${result.position}</h6>
        <div class="border-bottom"></div>
        <a href="${
          result.facebook
        }" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="${
          result.email
        }" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a>
        </div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

Вот мой HTML-код:

<div class="row justify-content-around wow zoomIn" id="teamRowOne">
      </div>

Я рассчитываю на выравнивание только пяти карт в каждом ряду.

Answer 1

Есть тысячи способов сделать это, я просто хочу на примере одного использовать оператор по модулю.Вы можете сделать это в одном цикле, например:

// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;

(это настраиваемый псевдокод, чтобы дать вам представление)

Answer 2

Поскольку вы используете классы сетки начальной загрузки row и col, когда вы создаете столбец с помощью col-md-2, в одной строке будет 6 разделов, так что вы можете получить 6 карт в одной строке после добавления дополнительныхчем 5 членов команды в массиве.

Так как нет класса, чтобы разделить строку на 5 разделов, но в вашем случае вы можете добавить небольшое поле, чтобы сделать пять карт в строке.Я попробовал это с m-2, что составляет поле 2px.

Добавьте его там, где вы создаете столбец внутри цикла

<div class="col-md-2 m-2 shadow p-3 mb-5 bg-white rounded ">

Надеюсь, это сработает для вас.