<div class="wd">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<button>随机</button>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
.wd {padding:100px;display:flex;justify-content:center;}
.wd div {width:100px;height:100px;background:#333;margin-right:20px;font-size:3vw;color:#fff;display:flex;align-items:center;justify-content:center;}
button {margin:0 auto;padding:10px 50px;display:block;border:none;background:#333;color:#fff;cursor:pointer;}
let a = document.querySelector(".wd");
let b = a.children;
let r;
document.querySelector("button").addEventListener("click", e => {
let b = a.children;
[...b].forEach((item, index) => {
item.startX = item.getBoundingClientRect().left;
});
[...b].forEach((item, index) => {
r = Math.random();
if (item.nextElementSibling && r > 0.5) {
a.insertBefore(item.nextElementSibling, item);
}
});
[...a.children].forEach(a => {
a.animate([{
transform: `translateX(${a.startX - a.getBoundingClientRect().left}px)`
}, {
transform: "translateX(0px)"
}], {
duration: 1000 * Math.random() + 500
});
});
});