可直接運行代碼?
<!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 = 1let 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 = 0let newcolumn = xlist.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 = newindexoldcolumn = 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>
和ArrayList＜＞()的區別)
