js实现网格

2026-03-15 10:25:42JavaScript

实现网格的基本方法

使用HTML和CSS创建基础的网格结构，通过JavaScript动态调整网格内容和样式。

<div id="grid-container"></div>

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

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

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

动态调整网格布局

通过JavaScript修改CSS变量实现网格布局的动态变化。

function changeGridColumns(columns) {
  const container = document.getElementById('grid-container');
  container.style.setProperty('--grid-columns', columns);
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
}

响应式网格实现

使用媒体查询结合JavaScript实现响应式网格布局。

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

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const columns = width > 900 ? 4 : width > 600 ? 3 : 2;
  changeGridColumns(columns);
});

网格拖拽排序功能

实现网格项目的拖拽排序功能需要引入拖拽API。

let draggedItem = null;

document.querySelectorAll('.grid-item').forEach(item => {
  item.setAttribute('draggable', true);

  item.addEventListener('dragstart', () => {
    draggedItem = item;
    setTimeout(() => item.style.display = 'none', 0);
  });

  item.addEventListener('dragend', () => {
    setTimeout(() => {
      item.style.display = '';
      draggedItem = null;
    }, 0);
  });
});

container.addEventListener('dragover', e => {
  e.preventDefault();
});

container.addEventListener('drop', e => {
  e.preventDefault();
  if (draggedItem) {
    container.insertBefore(draggedItem, document.elementFromPoint(e.clientX, e.clientY));
  }
});

虚拟滚动优化大型网格

对于包含大量项目的网格，实现虚拟滚动优化性能。

js实现网格

const items = Array(1000).fill().map((_, i) => `Item ${i + 1}`);
const visibleItems = 20;
let startIndex = 0;

function renderVisibleItems() {
  container.innerHTML = '';
  items.slice(startIndex, startIndex + visibleItems).forEach(text => {
    const item = document.createElement('div');
    item.className = 'grid-item';
    item.textContent = text;
    container.appendChild(item);
  });
}

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const itemHeight = 50; // 假设每个项目高度为50px
  const newStartIndex = Math.floor(scrollTop / itemHeight);
  if (newStartIndex !== startIndex) {
    startIndex = newStartIndex;
    renderVisibleItems();
  }
});

renderVisibleItems();