li纵向排列自动换行js

在JavaScript中实现li元素纵向排列并自动换行的功能，通常涉及到CSS布局和JavaScript动态计算。以下是详细的基础概念、优势、类型、应用场景以及解决方案。

基础概念

CSS Flexbox：一种用于创建灵活布局的CSS模块。
JavaScript DOM操作：通过JavaScript动态修改HTML文档对象模型（DOM）。

优势

灵活性：Flexbox提供了灵活的方式来排列元素。
响应式设计：能够根据容器大小自动调整布局。
易于实现：通过简单的CSS和JavaScript代码即可实现复杂布局。

类型

单列布局：所有li元素垂直排列。
多列布局：li元素按需自动换行到新列。

应用场景

导航菜单：垂直导航栏，当内容过多时自动换行。
列表展示：商品列表、文章摘要等。

解决方案

以下是一个示例，展示如何使用CSS Flexbox和JavaScript实现li元素纵向排列并自动换行。

HTML结构

<div class="container">
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- 更多li元素 -->
  </ul>
</div>

CSS样式

.container {
  width: 300px; /* 设置容器宽度 */
}

#list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%; /* 设置固定高度以便换行 */
}

#list li {
  width: 100%; /* 每个li占满一行 */
}

JavaScript代码

function autoWrapList() {
  const list = document.getElementById('list');
  const container = document.querySelector('.container');
  const itemHeight = 30; // 假设每个li的高度为30px
  const containerHeight = container.clientHeight;

  // 计算最多能显示多少行
  const maxRows = Math.floor(containerHeight / itemHeight);

  // 设置ul的高度为最大行数乘以每行的高度
  list.style.height = `${maxRows * itemHeight}px`;
}

// 页面加载完成后调用
window.onload = autoWrapList;

// 窗口大小改变时重新计算
window.onresize = autoWrapList;