js实现网格

实现网格布局的方法

使用CSS Grid布局可以快速创建网格结构。以下是一个基础示例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

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

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

动态生成网格的JavaScript方法

通过JavaScript动态创建网格元素：

function createGrid(rows, cols) {
  const container = document.createElement('div');
  container.className = 'grid-container';
  container.style.display = 'grid';
  container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
  container.style.gap = '10px';

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

  document.body.appendChild(container);
}

createGrid(3, 3);

响应式网格实现

使用媒体查询实现响应式网格布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

网格拖拽功能实现

使用HTML5拖放API实现网格项可拖动：

const items = document.querySelectorAll('.grid-item');

items.forEach(item => {
  item.draggable = true;

  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', item.id);
    setTimeout(() => item.style.opacity = '0.4', 0);
  });

  item.addEventListener('dragend', () => {
    item.style.opacity = '1';
  });
});

const container = document.querySelector('.grid-container');
container.addEventListener('dragover', (e) => {
  e.preventDefault();
});

container.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedItem = document.getElementById(id);
  const dropTarget = e.target.closest('.grid-item');

  if (dropTarget && draggedItem !== dropTarget) {
    const items = Array.from(container.children);
    const draggedIndex = items.indexOf(draggedItem);
    const dropIndex = items.indexOf(dropTarget);

    if (draggedIndex > dropIndex) {
      container.insertBefore(draggedItem, dropTarget);
    } else {
      container.insertBefore(draggedItem, dropTarget.nextSibling);
    }
  }
});