js实现网格

使用CSS Grid布局创建网格

在JavaScript中结合CSS Grid可以快速实现网格布局。CSS Grid提供了强大的二维布局能力，通过JavaScript动态设置网格属性。

// 创建容器元素
const container = document.createElement('div');
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(3, 100px)';
container.style.gridTemplateRows = 'repeat(3, 100px)';
container.style.gap = '10px';

// 创建网格项
for (let i = 0; i < 9; i++) {
  const item = document.createElement('div');
  item.style.backgroundColor = '#ddd';
  item.style.display = 'flex';
  item.style.alignItems = 'center';
  item.style.justifyContent = 'center';
  item.textContent = i + 1;
  container.appendChild(item);
}

document.body.appendChild(container);

使用Canvas绘制网格

Canvas API适合需要自定义绘制和交互的网格场景。

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
const gridSize = 40;
const lineColor = '#ccc';

// 绘制网格线
for (let x = 0; x <= canvas.width; x += gridSize) {
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, canvas.height);
  ctx.strokeStyle = lineColor;
  ctx.stroke();
}

for (let y = 0; y <= canvas.height; y += gridSize) {
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(canvas.width, y);
  ctx.strokeStyle = lineColor;
  ctx.stroke();
}

使用第三方库实现高级网格

ag-Grid等专业库提供企业级网格功能，包括排序、过滤和分组等。

import { Grid } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const gridOptions = {
  columnDefs: [
    { headerName: "ID", field: "id" },
    { headerName: "Name", field: "name" },
    { headerName: "Value", field: "value" }
  ],
  rowData: [
    { id: 1, name: "Item 1", value: 100 },
    { id: 2, name: "Item 2", value: 200 }
  ]
};

const gridDiv = document.querySelector('#myGrid');
new Grid(gridDiv, gridOptions);

响应式网格实现

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

function setupResponsiveGrid() {
  const container = document.getElementById('grid-container');
  const updateGrid = () => {
    if (window.innerWidth < 600) {
      container.style.gridTemplateColumns = 'repeat(2, 1fr)';
    } else if (window.innerWidth < 900) {
      container.style.gridTemplateColumns = 'repeat(3, 1fr)';
    } else {
      container.style.gridTemplateColumns = 'repeat(4, 1fr)';
    }
  };

  window.addEventListener('resize', updateGrid);
  updateGrid();
}

虚拟滚动优化大数据网格

对于大型数据集，实现虚拟滚动提高性能。

class VirtualGrid {
  constructor(container, itemCount, itemHeight, renderItem) {
    this.container = container;
    this.itemCount = itemCount;
    this.itemHeight = itemHeight;
    this.renderItem = renderItem;
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight) + 2;
    this.scrollTop = 0;

    this.container.style.position = 'relative';
    this.container.style.overflowY = 'auto';

    this.content = document.createElement('div');
    this.content.style.height = `${itemCount * itemHeight}px`;
    this.container.appendChild(this.content);

    this.container.addEventListener('scroll', () => this.handleScroll());
    this.renderVisibleItems();
  }

  handleScroll() {
    this.scrollTop = this.container.scrollTop;
    this.renderVisibleItems();
  }

  renderVisibleItems() {
    const startIdx = Math.floor(this.scrollTop / this.itemHeight);
    const endIdx = Math.min(startIdx + this.visibleItems, this.itemCount - 1);

    // 清除现有内容
    while (this.content.firstChild) {
      this.content.removeChild(this.content.firstChild);
    }

    // 渲染可见项
    for (let i = startIdx; i <= endIdx; i++) {
      const item = this.renderItem(i);
      item.style.position = 'absolute';
      item.style.top = `${i * this.itemHeight}px`;
      item.style.height = `${this.itemHeight}px`;
      item.style.width = '100%';
      this.content.appendChild(item);
    }
  }
}