纵向带说明的js相册

纵向带说明的JS相册基础概念

基础概念： 纵向带说明的JS相册是一种网页应用，它允许用户通过垂直滚动浏览一系列图片，并且每张图片下方通常会有一段描述或说明文字。这种相册通常使用JavaScript来控制图片的加载和显示，以及实现平滑的滚动效果。

类型与应用场景

类型：

静态相册：图片和说明都是预先设定好的。
动态相册：可以从服务器动态加载图片和说明，适用于图片数量较多或需要定期更新的场景。

应用场景：

个人博客：展示旅行照片或生活点滴。
企业官网：展示产品图片和相关介绍。
社交媒体：分享个人或团队的精彩瞬间。

示例代码

以下是一个简单的纵向带说明的JS相册示例，使用纯JavaScript和CSS实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Photo Album</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .album {
    width: 80%;
    margin: 0 auto;
  }
  .photo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .photo img {
    width: 100%;
    max-width: 400px;
    margin-right: 20px;
  }
  .description {
    flex-grow: 1;
  }
</style>
</head>
<body>
<div class="album">
  <div class="photo">
    <img src="image1.jpg" alt="Image 1">
    <div class="description">Description for Image 1</div>
  </div>
  <div class="photo">
    <img src="image2.jpg" alt="Image 2">
    <div class="description">Description for Image 2</div>
  </div>
  <!-- Add more photos as needed -->
</div>

<script>
  // Optional: Add smooth scrolling effect
  document.querySelectorAll('.photo').forEach(photo => {
    photo.addEventListener('click', () => {
      window.scrollTo({
        top: photo.offsetTop,
        behavior: 'smooth'
      });
    });
  });
</script>
</body>
</html>