Question

我有一个动态创建的列表，只要用户点击按钮就会添加到网页中。有时列表很短，很好，但有时它很长，它从页面底部流出。我该怎么做才能让任何溢出代替创建一个新列？（我不希望列长度均匀 - 我希望第一列尽可能多地用于文本，下一列仅在第一列用完房间时使用。）

Answer 1

您可以将项目列表缩减为项列（数组数组）列表。然后使用它来渲染html：

var longList = [1,2,3,4,5,6,7,8,9,10,11];
var htmlList = function(list){
  return "<ul>" +
    list.map(
      function(listItem){
        return "<li>"+listItem+"</li>";
      }
    ).join("")
    +"</ul>"
}
var htmlColums = function(listOfList){
  return listOfList.map(
    function(list){
      return "<div style='float:left'>" +
        htmlList(list) +
        "</div>";
    }
  ).join("");
}
//takes a list of items and returns a list of list items 
//  list of columns
var toColumns = function(list,itemsInColumn){
  return list.reduce(
    function(acc,item){
      if(acc.slice(-1)[0].length===itemsInColumn){
        acc.push([])
      }
      acc.slice(-1)[0].push(item);
      return acc;
    }
    ,[[]]
  )
};

document.getElementById("createContent").addEventListener(
  "click",
  function(e){
    var itemsInColumn = parseInt(
      document.getElementById("itemsInColumn").value
      ,10
    );
    if(isNaN(itemsInColumn)){
      itemsInColumn=3;
    }
    document.getElementById("content").innerHTML = htmlColums(
      toColumns(longList,itemsInColumn)
    );
    
  }
)

    <input type="number" placeholder="Items in column" id="itemsInColumn">
    <input type="button" value="render items" id="createContent">
    <div id="content">

只有在没有空间的情况下，列表才会溢出到另一列

1 个答案: