Javascript HTML元素tofront-toback

有没有人想到一种更好/更干净/更快的方法来排列DOM元素（请仅使用javascript）：

var frontBackList=[]；
函数frontBackProc（dir、elem、baseZ）{
baseZ=baseZ | | 100；
变量id=元素id；
如果（！id）{
id=elem.id=“rand”+（新日期（）.getTime（））；
}
if（！~frontBackList.indexOf（id））{
frontBackList.push（id）；
}
var see=0；//dev
var loZ=100000；//max Z大约是64000
var hiZ=-100000；
对于（var i=frontBackList.length；i--；）{
var el=document.getElementById（frontBackList[i]）；
如果（！el）{
frontBackList.slice（i，1）；//删除缺少的
}否则{
var z=数字（el.style.zIndex）| 0；
if（z-hiZ）{
hiZ=z；
}
//发展
el.style.left=20*见+px；
el.style.top=20*见+px；
见++；
}
}
如果（dir>0）{
elem.style.zIndex=hiZ+1；
}否则{
elem.style.zIndex=loZ-1；
}
log（“bob”，elem.style.zIndex）；
}
前端功能（elem、baseZ）{
frontBackProc（1，elem，baseZ）；
}
功能备份（elem、baseZ）{
frontBackProc（-1，elem，baseZ）；
}
toFront（document.getElementById（“红色”））；
toFront（document.getElementById（“绿色”））；
toFront（document.getElementById（“蓝色”））；
toFront（document.getElementById（“黄色”））；
toFront（document.getElementById（“青色”）；
toBack（document.getElementById（“蓝色”））；
toFront（document.getElementById（“红色”））；
toFront（document.getElementById（“黄色”）；
toBack（document.getElementById（“红色”））
.box{
左：20px；
顶部：20px；
宽度：30px；
高度：30px；
显示：内联块；
位置：绝对位置；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
.青色{
背景色：青色；
}
红色
绿色
蓝色
黄色的
青色
如果唯一的目的只是按照某种模式排列盒子，那么就有大量不必要的东西。我想你的目标是：

把箱子按对角线排列
把盒子按上下排列
按相反的顺序放置
通常情况下，最主要的问题是代码被破坏，而你们的代码并不是，但正如我刚才所做的，这很有趣，谢谢


详细信息将在演示中进行注释

演示

/*
|queryselectorAll（）
||将所有.框收集到节点列表中
|数组。from（）
||将节点列表转换为数组
|反向
||颠倒数组的顺序
*/
var-box=Array.from（document.querySelectorAll（'.box'））.reverse（）；
/* 
|map（）将在数组的每个元素上运行一个函数
||如果当前索引是偶数。。。
||给它一个z指数1
||否则，给它一个z指数2
||为每个元素添加一个对角线距离
||按索引递增
*/
映射（函数（box、idx、box）{
如果（（idx%2）==0）{
box.style.zIndex=1；
}否则{
box.style.zIndex=2；
}
box.style.left=20*idx+'px'；
box.style.top=20*idx+'px'；
});
.box{
左：20px；
顶部：20px；
宽度：30px；
高度：30px；
显示：内联块；
位置：绝对位置；
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}
.青色{
背景色：青色；
}
莱姆先生{
背景色：石灰；
}
红色
绿色
蓝色
黄色的
青色
莱姆
感谢代码审查网站上的提示。。。这正是我所需要的。地图是一个好主意，而且代码很整洁。该方法是通用的，颜色和对角线仅用于测试和检查。谢谢哦，我想这可能会在将来帮助一些人？它在某种程度上帮助了我，因为我很少在工作中弄乱布局模式，所以谢谢你，欢迎你，先生，快乐编码。