HTML元素tofront toback

Question

任何人都会想到更好/更清洁/更快的方法来安排DOM元素（请只使用vanilla javascript）：

＆＃13;

＆＃13;

var frontBackList = [];

function frontBackProc(dir, elem, baseZ) {
  baseZ = baseZ || 100;
  var id = elem.id;
  if (!id) {
    id = elem.id = "rand" + (new Date().getTime());
  }

  if (!~frontBackList.indexOf(id)) {
    frontBackList.push(id);
  }

  var see = 0; // dev
  var loZ = 100000; // max Z is something like 64,000
  var hiZ = -100000;
  for (var i = frontBackList.length; i--;) {
    var el = document.getElementById(frontBackList[i]);

    if (!el) {
      frontBackList.slice(i, 1); // remove missing
    } else {
      var z = Number(el.style.zIndex) || 0;

      if (z <= loZ) {
        loZ = z;
      }
      if (z > hiZ) {
        hiZ = z;
      }
      // dev
      el.style.left = 20 * see + "px";
      el.style.top = 20 * see + "px";
      see++;
    }

  }

  if (dir > 0) {
    elem.style.zIndex = hiZ + 1;
  } else {
    elem.style.zIndex = loZ - 1;
  }


  console.log("bob", elem.style.zIndex);

}

function toFront(elem, baseZ) {
  frontBackProc(1, elem, baseZ);
}

function toBack(elem, baseZ) {
  frontBackProc(-1, elem, baseZ);
}
toFront(document.getElementById("red"));
toFront(document.getElementById("green"));
toFront(document.getElementById("blue"));
toFront(document.getElementById("yellow"));
toFront(document.getElementById("cyan"));

toBack(document.getElementById("blue"));
toFront(document.getElementById("red"));
toFront(document.getElementById("yellow"));
toBack(document.getElementById("red"));

＆＃13;

.box {
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.cyan {
  background-color: cyan;
}

＆＃13;

<div id="red" class="box red">red</div>
<div id="green" class="box green">green</div>
<div id="blue" class="box blue">blue</div>
<div id="yellow" class="box yellow">yellow</div>
<div id="cyan" class="box cyan">cyan</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果唯一目的只是以某种模式安排盒子，那就有大量不必要的东西。我认为你的目标是：

1. 对角线对齐
2. 以上下模式排列方框
3. 按相反顺序放置

通常情况下主要关注的是你的代码没有被破坏，但我认为我已经完成了a site that members analyze working code and help improve it，但这很有趣，谢谢。

详细信息在演示中进行了评论

演示

＆＃13;
＆＃13;
/* 
|queryselectorAll()
|| Collect all .box into a NodeList
|Array.from()
|| Convert NodeList into an array
|reverse()
|| Reverse the order of array
*/
var boxes = Array.from(document.querySelectorAll('.box')).reverse();

/* 
|map() will run a function on each element of array
|| if the current index is an even number...
|| give it a z-index of 1
|| otherwise give it a z-index of 2
|| Add a diagonal distance to each element which is
|| incremented by index
*/
boxes.map(function(box, idx, boxes) {
  if ((idx % 2) === 0) {
    box.style.zIndex = 1;
  } else {
    box.style.zIndex = 2;
  }
  box.style.left = 20 * idx + 'px';
  box.style.top = 20 * idx + 'px';
});
＆＃13;
.box {
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.cyan {
  background-color: cyan;
}

.lime {
  background-color: lime;
}
＆＃13;
<div class="box red">red</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
<div class="box yellow">yellow</div>
<div class="box cyan">cyan</div>
<div class='box lime'>Lime</div>
＆＃13;
＆＃13;
＆＃13;