如何为我的排行榜创建两列？

时间：2019-03-03 16:43:16

标签： javascript html css

这是页首横幅代码。我有10位玩家根据他们的得分从1到10排名。

现在的问题是如何将玩家分为两列？ （每列将包含5位玩家）。

现在有一列包含所有10个玩家。

我正在学习Web开发，任何解决方案都会得到赞赏。

谢谢。

代码如下：

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.img = "https://randomuser.me/api/portraits/men/12.jpg"
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane tanha";
profile2.points = 2000;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg"
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 4000;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg"
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profile4.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile4);

let profile5 = {};
profile5.name = "Sally Peterson";
profile5.points = 1100;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile5);

let profile6 = {};
profile6.name = "Sally Peterson";
profile6.points = 1400;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile6);

let profile7 = {};
profile7.name = "Sally Peterson";
profile7.points = 1400;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile7);

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.points = 1400;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.points = 1400;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.points = 1500;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile10);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) {
  return b.points - a.points;
})

let profilesDiv = document.getElementsByClassName('profiles')[0];

let count = 1;
profiles.forEach(function(entry) {
  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;
  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
  profilesDiv.appendChild(profile);
  count++;

});
.profile {
  padding: 10px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 40px;
  box-sizing: border-box;
}

.profile .name {
  margin-right: 200px;
  float: right;
  width: 230px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #b6cdea;
  font-size: 45px;
}

.profile img {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.points {
  position: absolute;
  margin: 0px 100px 100px 450px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #008CBA;
}
<div class="profiles"></div>

1 个答案:

答案 0 :(得分：1)

  1. 创建列。

.row {
  display: flex;
}

.column {
  flex: 50%;
}
<div class="row">
  <div class="column">A</div>
  <div class="column">B</div>
</div>

  1. 中断计数，然后将配置文件插入另一列。
let count = 1;
profiles.forEach(function(entry) {
  let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count-1)/5)];
  ...

完整代码段： 

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.points = 1500;
profile1.img = "https://randomuser.me/api/portraits/men/12.jpg"
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane tanha";
profile2.points = 2000;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg"
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.points = 4000;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg"
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.points = 1900;
profile4.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile4);

let profile5 = {};
profile5.name = "Sally Peterson";
profile5.points = 1100;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile5);

let profile6 = {};
profile6.name = "Sally Peterson";
profile6.points = 1400;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile6);

let profile7 = {};
profile7.name = "Sally Peterson";
profile7.points = 1400;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile7);

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.points = 1400;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.points = 1400;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.points = 1500;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg"
profiles.push(profile10);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) {
  return b.points - a.points;
})


let count = 1;
profiles.forEach(function(entry) {
let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count-1)/5)];

  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;
  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";
  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
  profilesDiv.appendChild(profile);
  count++;

});
.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 10px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 40px;
  box-sizing: border-box;
}

.profile .name {
  margin-right: 200px;
  float: right;
  width: 230px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #b6cdea;
  font-size: 45px;
}

.profile img {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.points {
  position: absolute;
  margin: 0px 100px 100px 450px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #008CBA;
}
<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

相关问题
最新问题