如何对列表换行输出

列表常用于展示信息，然而在信息过多时，列表所占据的空间就会变得非常有限，这时就需要对列表进行换行输出。下面将从不同方面对如何实现列表换行输出进行阐述。

一、利用CSS样式实现列表换行输出

在HTML中，利用CSS样式可以很方便实现列表换行输出。具体实现方法如下：


ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  /*根据实际需要设置*/
  }
li{
  width: 30%;  /*根据实际需要设置*/
  }

通过将ul的display属性设置为flex，并将flex-wrap属性设置为wrap，即可实现列表的自动换行。此外，还可以根据实际需要设置justify-content属性和li元素的宽度，以达到更好的视觉效果。

二、利用JavaScript实现列表换行输出

在使用CSS无法满足需求时，也可以通过JavaScript来实现列表的自动换行。具体实现方法如下：


function wrapList(){
 var ul = document.getElementById("list");
 var lis = ul.getElementsByTagName("li");
 var len = lis.length;
 var liWidth = lis[0].offsetWidth;   /*假设每个 li 的宽度相等*/
 var ulWidth = ul.offsetWidth;
 var rowLiNum = parseInt(ulWidth/liWidth);
 var rowCount = Math.ceil(len/rowLiNum);
 ul.style.height = rowCount*liWidth + 'px';
 for(var i=0;i<len;i++){
  var rn = i%rowLiNum;
  var cn = parseInt(i/rowLiNum); /*计算行和列*/
  lis[i].style.position= "absolute";
  lis[i].style.left =  rn*liWidth + 'px';
  lis[i].style.top = cn*liWidth + 'px';
 }
}
window.onload = wrapList;

通过定义wrapList函数，首先获取列表的ul元素及其子元素li的宽度、总共要展示的列表项总数以及每行需展示的列表项数，再利用for循环计算每个列表项的位置，最后设置ul的高度，从而实现列表的自动换行。

三、结合CSS与JavaScript实现列表换行输出

在实际开发中，可以结合利用CSS样式和JavaScript来实现列表的自动换行，这样更加灵活方便。具体实现方法如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表换行输出</title>
<style>
 /*CSS部分*/
 ul{
  list-style:none;
  margin:0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 li{
  margin-top:10px;
  width:calc(25% - 10px);
  border: 1px solid #ccc;
  height:50px;
 }
</style>
</head>
<body onload="wrapList()">
<!-- HTML部分 -->
 <ul id="list">
  <li>1</li>
  <li>2</li>
  ……
  <li>25</li>
 </ul>
</body>
<script>
  /*JS部分*/
  function wrapList(){
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    var len = lis.length;
    var liWidth = lis[0].offsetWidth;
    var ulWidth = ul.offsetWidth;
    var rowLiNum = parseInt(ulWidth/(liWidth + 10));
    var rowCount = Math.ceil(len/rowLiNum);
    ul.style.height = rowCount*(liWidth + 10) + 'px';
    for(var i=0;i<len;i++){
      var rn = i%rowLiNum;
      var cn = parseInt(i/rowLiNum);
      lis[i].style.position= "absolute";
      lis[i].style.left =  rn*(liWidth + 10) + 'px';
      lis[i].style.top = cn*(liWidth + 10) + 'px';
    }
  }
</script>
</html>

通过引入CSS样式表和JavaScript脚本，在HTML中展示的列表中实现自动换行，从而充分发挥CSS与JavaScript的优势，达到更加完美的视觉效果。