面试题：JavaScript 动态创建复杂 CSS 布局切换效果

Question

要求实现一个图片展示画廊的布局切换效果。当用户点击画廊中的不同缩略图时，主展示区域的图片和其周围的布局会发生变化，布局变化包括图片的尺寸、位置以及周围文字说明的排版等，需通过 JavaScript 操作 CSS 来实现，并且代码要具有良好的扩展性和性能优化。请详细描述实现思路并给出核心代码。

Answer 1

实现思路

1. HTML 结构：
   • 创建画廊的基本结构，包括缩略图区域和主展示区域。缩略图区域包含多个代表不同图片的 <img> 元素。主展示区域包含一个用于显示主图片的 <img> 元素以及相关文字说明的 <div> 等元素。
2. CSS 样式：
   • 为不同布局状态定义 CSS 类，例如不同尺寸、位置和文字排版的样式。每个布局状态对应一个独特的 CSS 类。
   • 使用 CSS 的 position、width、height 等属性来控制图片和文字的位置与尺寸。
3. JavaScript 交互：
   • 给每个缩略图添加点击事件监听器。
   • 在点击事件处理函数中，根据点击的缩略图确定要展示的主图片，并根据需求切换主展示区域的 CSS 类，以实现布局的变化。
   • 为了性能优化，可以使用事件委托来处理缩略图的点击事件，减少事件监听器的数量。同时，避免频繁操作 DOM，例如可以提前计算好布局变化所需的值，然后一次性应用到 DOM 元素上。

核心代码

1. HTML 示例：

<div id="gallery">
  <div id="thumbnails">
    <img src="thumbnail1.jpg" data - main="main1.jpg" data - layout="layout1" alt="Thumbnail 1">
    <img src="thumbnail2.jpg" data - main="main2.jpg" data - layout="layout2" alt="Thumbnail 2">
    <!-- 更多缩略图 -->
  </div>
  <div id="main - display">
    <img id="main - image" src="" alt="Main Image">
    <div id="caption"></div>
  </div>
</div>

2. CSS 示例：

/* 布局1样式 */
.layout1 #main - image {
  width: 800px;
  height: 600px;
  position: relative;
  left: 50px;
  top: 30px;
}
.layout1 #caption {
  position: absolute;
  bottom: 20px;
  left: 50px;
  font - size: 18px;
}
/* 布局2样式 */
.layout2 #main - image {
  width: 600px;
  height: 400px;
  position: relative;
  left: 100px;
  top: 50px;
}
.layout2 #caption {
  position: absolute;
  bottom: 30px;
  left: 100px;
  font - size: 16px;
}

3. JavaScript 示例：

// 获取元素
const thumbnails = document.getElementById('thumbnails');
const mainImage = document.getElementById('main - image');
const caption = document.getElementById('caption');
const mainDisplay = document.getElementById('main - display');

// 事件委托
thumbnails.addEventListener('click', function (e) {
  if (e.target.tagName === 'IMG') {
    const mainSrc = e.target.dataset.main;
    const layout = e.target.dataset.layout;
    mainImage.src = mainSrc;
    // 移除之前的布局类
    mainDisplay.classList.remove(...Array.from(mainDisplay.classList).filter(cls => cls.startsWith('layout')));
    // 添加新的布局类
    mainDisplay.classList.add(layout);
    // 假设这里从图片的alt属性获取caption文字
    caption.textContent = e.target.alt;
  }
});