仅当没有剩余空间时，才将列表溢出到另一列中

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">