如何随机调换页面内.item类div元素的已有定位样式

原生JS实现 #

const items = document.querySelectorAll('.item');
// 收集所有item原始定位样式
const originPositions = Array.from(items).map(item => ({
  right: item.style.right,
  top: item.style.top
}));

// Fisher-Yates无偏差洗牌算法，保证样式不重复分配
function shuffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[randomIndex]] = [newArr[randomIndex], newArr[i]];
  }
  return newArr;
}

// 给每个item赋值打乱后的定位
const shuffledPositions = shuffleArray(originPositions);
items.forEach((item, index) => {
  item.style.right = shuffledPositions[index].right;
  item.style.top = shuffledPositions[index].top;
});

jQuery实现 #

const $items = $('.item');
// 收集所有item原始定位样式
const originPositions = $items.map(function() {
  return {
    right: $(this).css('right'),
    top: $(this).css('top')
  }
}).get();

// Fisher-Yates无偏差洗牌算法
function shuffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[randomIndex]] = [newArr[randomIndex], newArr[i]];
  }
  return newArr;
}

// 赋值打乱后的定位
const shuffledPositions = shuffleArray(originPositions);
$items.each(function(index) {
  $(this).css({
    right: shuffledPositions[index].right,
    top: shuffledPositions[index].top
  });
});

补充说明 #

• 上述实现采用Fisher-Yates洗牌算法，可保证所有定位样式随机分配且无重复，完全匹配你需要的「每个item从剩余未使用样式中随机选取」的需求
• 如果你需要实现元素绝对不会分配到自身原始样式的错位效果，可以在洗牌后增加校验逻辑：如果存在下标对应样式和原始一致的情况，重新执行洗牌即可
• 如果你后续改为使用CSS变量--x/--y控制位移，只需要把样式收集和赋值的逻辑改为读取、设置对应CSS变量即可。

内容的提问来源于stack exchange，提问作者JamalDols