js实现分栏

使用CSS Grid实现分栏布局

CSS Grid是一种强大的布局方式，可以轻松实现分栏效果。通过定义网格容器和网格项，可以快速创建响应式分栏布局。

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

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

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

使用Flexbox实现分栏布局

Flexbox是另一种流行的布局方式，适合创建灵活的分栏布局。通过设置flex容器和flex项，可以控制分栏的排列方式。

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

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  flex: 1;
  margin: 0 10px;
  background-color: #f0f0f0;
  padding: 20px;
}

使用JavaScript动态创建分栏

通过JavaScript可以动态创建分栏，适用于需要根据数据或用户交互动态调整布局的场景。

<div id="columnContainer"></div>
<button onclick="createColumns()">Create Columns</button>

function createColumns() {
  const container = document.getElementById('columnContainer');
  container.innerHTML = '';

  for (let i = 0; i < 3; i++) {
    const column = document.createElement('div');
    column.className = 'column';
    column.textContent = `Column ${i + 1}`;
    column.style.cssText = `
      float: left;
      width: 30%;
      margin: 1.5%;
      padding: 20px;
      background-color: #f0f0f0;
      box-sizing: border-box;
    `;
    container.appendChild(column);
  }
}

响应式分栏布局

为了实现响应式分栏，可以使用媒体查询在不同屏幕尺寸下调整布局。

/* 默认三栏布局 */
.column {
  float: left;
  width: 30%;
  margin: 1.5%;
}

/* 中等屏幕改为两栏 */
@media (max-width: 768px) {
  .column {
    width: 45%;
  }
}

/* 小屏幕改为一栏 */
@media (max-width: 480px) {
  .column {
    width: 100%;
    margin: 10px 0;
  }
}

使用CSS多列布局

CSS多列布局（Multi-column Layout）是专门为文本内容分栏设计的方案。

<div class="multi-column">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

.multi-column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ddd;
}