空きがない場合にのみ別の列にリストがオーバーフローする

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