js实现宫格布局图片放大交互动画

可直接运行代码
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>五图交互布局</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      width: 400px;
      margin: 40px auto;
    }

    .item {
      background-color: #eee;
      border: 2px solid #333;
      background-size: cover;
      background-position: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: red;
      aspect-ratio: 1 / 1;
    }

    /* 默认布局 1 - p1大图 */

    .gallery #p1 {
      grid-row: 1 / span 2;
      grid-column: 1;
    }

    .gallery #p2 {
      grid-row: 1;
      grid-column: 2;
    }

    .gallery #p3 {
      grid-row: 1;
      grid-column: 3;
    }

    .gallery #p4 {
      grid-row: 2;
      grid-column: 2;
    }

    .gallery #p5 {
      grid-row: 2;
      grid-column: 3;
    }
  </style>
</head>

<body>
  <div class="gallery">
    <div class="item" id="p1" style="background-image: url('https://picsum.photos/seed/01/400/400')">1</div>
    <div class="item" id="p2" style="background-image: url('https://picsum.photos/seed/02/400/400')">2</div>
    <div class="item" id="p3" style="background-image: url('https://picsum.photos/seed/03/400/400')">3</div>
    <div class="item" id="p4" style="background-image: url('https://picsum.photos/seed/04/400/400')">4</div>
    <div class="item" id="p5" style="background-image: url('https://picsum.photos/seed/05/400/400')">5</div>
  </div>

  <script>
    // 当前放大图片的下标
    let oldindex = 0
    // 当前放大图片的列
    let oldcolumn = 1
    let list = [
      [1, '1 / span 2'],
      [2, 1],
      [3, 1],
      [2, 2],
      [3, 2],
    ]
    document.querySelector('.gallery').addEventListener('mouseover', (e) => {
      if (!e.target.classList.contains('item')) return;
      let p1 = document.getElementById('p1');
      let p2 = document.getElementById('p2');
      let p3 = document.getElementById('p3');
      let p4 = document.getElementById('p4');
      let p5 = document.getElementById('p5');
      // 当前点击图片的位置
      const clickedItemStyle = window.getComputedStyle(e.target);
      let x = clickedItemStyle.getPropertyValue('grid-column-start')
      let y = clickedItemStyle.getPropertyValue('grid-row-start')
      // console.log(x, y);
      if (x == oldcolumn) return;
      let newindex = 0
      let newcolumn = x
      list.forEach((item, i) => {
        // 如果垮了中间图片就修改影响的中间图片位置
        if (Math.abs(newcolumn - oldcolumn) > 1 && item[0] == 2 && item[1] != y) {
          // console.log('需要位移的中间图片的下标', i)
          if (oldcolumn < x) {
            list[i] = [list[i][0] - 1, item[1]]
          } else {
            list[i] = [list[i][0] + 1, item[1]]
          }
        }
        if (x == item[0] && y == item[1]) {
          // console.log('放大图片下标', i)
          // 放大当前点击图片
          list[i] = [item[0], '1 / span 2']
          // console.log('缩小放大图片', oldindex)
          // 缩小放大的图片，当前点击的第几排就向第几排缩小
          list[oldindex] = [list[oldindex][0], y]
          // 存储当前放大图片下标
          newindex = i
        }
        // 缩小放大列的另一个图片
        if (item[0] == x && item[1] != y) {
          // console.log("缩小图片下标", i)
          // 根据上一次放大图片的列，向上次放大列位移，当前大于上一次减一，小于上一次加一
          if (oldcolumn < x) {
            list[i] = [list[i][0] - 1, item[1]]
          } else {
            list[i] = [list[i][0] + 1, item[1]]
          }
        }
      })
      // console.log(list)
      // 赋值当前放大图片下标和列
      oldindex = newindex
      oldcolumn = newcolumn
      // 重定义布局
      p1.style.gridColumn = list[0][0];
      p1.style.gridRow = list[0][1];
      p2.style.gridColumn = list[1][0];
      p2.style.gridRow = list[1][1];
      p3.style.gridColumn = list[2][0];
      p3.style.gridRow = list[2][1];
      p4.style.gridColumn = list[3][0];
      p4.style.gridRow = list[3][1];
      p5.style.gridColumn = list[4][0];
      p5.style.gridRow = list[4][1];
    });
  </script>

</body>

</html>