创建自适应排行榜

Question

下面的代码创建一个排行榜，将用户从1到10进行排名，结果如下：

如您所见，有10位用户的个人资料图片和姓名点等...排名从1到10。

填充排行榜所需的所有数据都将来自服务器（目前我们与之无关，例如，一个保存用户点的数组）。

现在的问题是我不知道如何修改代码以将此功能添加到页首横幅：

让我们想到一个正在查看他/她笔记本电脑上的排行榜的用户（参与者），以查看他/她获得的排名。好... 我们称他/她为主要用户。

如果主要用户在1至10级之间（例如5级），排行榜应只包括他并突出显示他：

例如，如果主要用户的排名不是从1到10，则他的排名是1025，那么排行榜会将他排在第10位，仅向他显示他获得的排名：

代码如下：

JS

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

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

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

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

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

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

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

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

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.job = "Taxi Diver";
profile8.points = 1400;
profile8.level = 17;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile8.imgDiamonds = "Diamonds.png";
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.job = "High School Student";
profile9.points = 1400;
profile9.level = 37;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile9.imgDiamonds = "Diamonds.png";
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.job = "Student";
profile10.points = 1500;
profile10.level = 14;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile10.imgDiamonds = "Diamonds.png";
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 imgDiamonds = document.createElement('img');
  imgDiamonds.className = "profileDia";
  imgDiamonds.src = entry.imgDiamonds;


  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";


  let job = document.createElement('span');
  job.className = "job";
  job.textContent = entry.job;
  profile.appendChild(job);
  profile.prepend(img);
  profile.prepend(imgDiamonds);


  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  let level = document.createElement('span');
  level.className = "level";
  level.textContent = entry.level;
  profile.appendChild(level);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  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: 60px;
  box-sizing: border-box;
}

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

.profile .job {
  margin-right: -210px;
  margin-top: 25px;
  float: right;
  width: 200px;
  height: 50px;
}

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

.profile img.profilePic {
  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);
}

.profile img.profileDia {
  position: absolute;
  margin: -10px 70px 50px 520px;
  width: 2%;
  height: auto;
}

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

.level {
  position: absolute;
  margin: 35px 100px 100px 230px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  -moz-border-radius: 30px;
  /* or 50% */
  border-radius: 30px;
  /* or 50% */
  background-color: black;
  color: white;
  text-align: center;
  font-size: 1.5em;
}

<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

要更加清楚地突出显示所需的等级，名称并将等级10更改为1025或我想要的任何等级编号是我最大的问题...我什至无法选择等级！ ：（

Answer 1

这种情况可以通过几种方法解决。没有一个好的CSS属性可以解决这种情况。

一种方法是预先估计每个块将占用的最大空间量，然后确定其尺寸。或使用考虑到这些空间限制的基于网格的设计方法。

第二种方法是减小数字的字体大小，并尝试将其放入其当前块中，以便即使它们为四位数，也不会移动以下内容。