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;
}这些方法提供了从基础布局到交互功能的完整实现方案，可以根据具体需求进行调整和扩展。
