How to randomize the position of divs

Maybe this is a silly question, but I can't get ahead with this. Basically what I need is to randomize the position of the items, i.e. item 1 takes the style of item 3 (or 2 or 4), item 2 takes the style of 1,3,4 and so on.

Here is my code

let item = document.querySelectorAll('.item')

for (let i = 0; i < item.length; i++) {
  const getRight = item[i].style.right
  const getTop = item[i].style.top
  const getStyles = [getRight, getTop]
  console.log(`Item${i}, Style: ${getStyles}`);
}

.items--cloud {
  position: relative;
  height: 400px;
  width: 500px;
  background: #333;
}

[data-item] {
  position: absolute;
  transform: translate3d(var(--x), var(--y), 0);
}

<div class="items--cloud">
  <div data-item="item-1" class="item item-1" style="right: 0%;top: 40%;">
    <img src="https://via.placeholder.com/90x90.?text=item1" alt="">
  </div>
  <div data-item="item-2" class="item item-2" style="right: 53%;top: 28%;">
    <img src="https://via.placeholder.com/90x90?text=item2" alt="">
  </div>
  <div data-item="item-3" class="item item-3" style="right: 39%;top: 4%;">
    <img src="https://via.placeholder.com/90x90?text=item3" alt="">
  </div>
  <div data-item="item-4" class="item item-4" style="right: 79%;top: 26%;">
    <img src="https://via.placeholder.com/90x90?text=item4" alt="">
  </div>
</div>

I would have no problem using jQuery if necessary.