html写动态相册代码

动态相册是展示图片的常用方式之一，我们可以根据HTML语言的特性，使用一些CSS和JavaScript技巧来实现动态相册。在HTML中，我们可以使用一个div标签来包含所有照片，再使用img标签来插入照片。

接下来，我们可以使用CSS来设置我们的相册样式。我们可以设置每张照片的宽度和高度，以及相册的布局方式。为了方便操作，在这里我们先定义一个名为“gallery”的class，然后使用CSS样式来设置相册：

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.gallery img {
  width: 200px;
  height: 200px;
  margin: 10px;
}

现在，我们来添加一些互动效果。当用户点击某张照片时，我们可以使用JavaScript来创建一个模态框来放大这张照片，同时我们也可以添加一些控件，如左右箭头或者缩略图来增强用户体验。下面是一个简单的例子：

// 获取相册容器
const gallery = document.querySelector('.gallery');
// 获取所有图片节点
const images = gallery.querySelectorAll('img');
// 遍历每个图片并添加点击事件监听器
images.forEach(image => {
  image.addEventListener('click',() => {
    // 创建模态框
    const modal = document.createElement('div');
    modal.classList.add('modal');
    // 创建图片节点
    const modalimg = document.createElement('img');
    modalimg.src = image.src;
    modal.appendChild(modalimg);
    // 添加模态框到页面中
    document.body.appendChild(modal);
    // 监听器：当模态框被点击时关闭模态框
    modal.addEventListener('click',() => {
      modal.remove();
    });
  });
});

这样，我们就可以在HTML语言中创建一个简单的动态相册了。当然，我们可以根据实际需求来增加更多的功能和效果。总之，使用HTML语言，结合CSS和JavaScript技巧，我们可以轻松创建漂亮的动态相册。