创建自适应排行榜

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属性来解决这种情况。

一种方法是预先估计每个块将占用的最大空间量，然后修复它们的尺寸。或使用基于网格的设计方法，注意这些空间限制。

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