li纵向排列自动换行js

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

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

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

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

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;