js不规则照片墙

<div id="photo-wall">
  <!-- 图片元素将通过JavaScript动态添加 -->
</div>

#photo-wall {
  position: relative;
  width: 100%;
  height: auto;
}

.photo-item {
  position: absolute;
  transition: all 0.5s ease;
}

.photo-item img {
  width: 100%;
  height: auto;
  display: block;
}

const photoWall = document.getElementById('photo-wall');
const photos = [
  // 假设这里有一组图片URL
  'path/to/photo1.jpg',
  'path/to/photo2.jpg',
  // ...
];

photos.forEach((photoUrl, index) => {
  const photoItem = document.createElement('div');
  photoItem.classList.add('photo-item');
  
  const img = document.createElement('img');
  img.src = photoUrl;
  
  photoItem.appendChild(img);
  photoWall.appendChild(photoItem);
  
  // 随机设置图片位置（示例）
  const randomX = Math.random() * (window.innerWidth - 200); // 假设图片宽度最大为200px
  const randomY = Math.random() * (window.innerHeight - 200); // 假设图片高度最大为200px
  photoItem.style.left = `${randomX}px`;
  photoItem.style.top = `${randomY}px`;
});

// 可以添加窗口大小变化时重新布局的逻辑
window.addEventListener('resize', () => {
  // 重新计算图片位置...
});