js实现九宫格

实现九宫格布局

使用CSS Grid可以轻松实现九宫格布局。Grid布局提供了强大的二维布局能力，适合创建复杂的网格结构。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 300px;
  height: 300px;
}

.grid-item {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

动态生成九宫格

使用JavaScript动态创建九宫格元素：

const container = document.createElement('div');
container.className = 'grid-container';

for (let i = 1; i <= 9; i++) {
  const item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = i;
  container.appendChild(item);
}

document.body.appendChild(container);

添加交互功能

为九宫格添加点击事件处理：

const items = document.querySelectorAll('.grid-item');
items.forEach(item => {
  item.addEventListener('click', () => {
    item.style.backgroundColor = '#ccc';
    console.log(`Clicked item ${item.textContent}`);
  });
});

响应式九宫格

使九宫格适应不同屏幕尺寸：

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    width: 200px;
    height: 450px;
  }
}

@media (max-width: 400px) {
  .grid-container {
    grid-template-columns: 1fr;
    width: 100px;
    height: 900px;
  }
}

动画效果

为九宫格添加悬停动画：

.grid-item {
  transition: transform 0.3s, background-color 0.3s;
}

.grid-item:hover {
  transform: scale(1.1);
  background-color: #ddd;
}

这些方法提供了从基础布局到交互功能的完整实现方案，可以根据具体需求进行调整和扩展。