divオブジェクトをうまく配布する

Question

入力したオブジェクトの高さと幅を考慮してオブジェクトをうまく配布できるWebページを作成したい。

最初のページには、オブジェクトの高さと幅、オブジェクトの数量、行ごとの制限値を入力します。 2番目のページには、配布されたオブジェクトが表示されます。

例：

オブジェクト35x60cm、3つの量|オブジェクト60x60cm、4つの量|オブジェクト 70x70cm、5個、上限は200cmです。

オブジェクトがうまくいけば、配布しているであろうと、行当たり200センチメートルに到達したとき、他の行が追加され、オブジェクトが2行目に位置づけるだろうまま、2行目が十分でない場合、それはなり3行目などとなります。

オブジェクトはdivsのようになります！

ありがとうございます！

Answer 1

CSSとJSだけで配布できます。 HTMLコードは次のとおりです。

<input type="text" id="inputWidth"=> give me width</input> 
<input type="text" id="inputHeight"=> give me height</input> 
<input type="text" id="inputNum"=> give me number</input> 
<input type="text" id="inputContWidth"=> give me container width</input> 
<button onclick="addShapes()">Submit</button> 
<div id="container"> 
</div> 

そして、配布用のCSSコードです。これは、アイテムを配布するには、それらを見えるようにするためでもある。

#container { 
    position: relative; 
    background-color: gray; 
    height: auto; 
    display: flex; 
    flex-wrap: wrap; 
    align-content: center; 
    justify-content: center; 
} 

.item { 
    position: relative; 
    background-color: blue; 
    border-style: solid; 
} 

次に入力を使用して必要な数の項目を追加するためにJavascriptを使用します。

function addShapes() { 
    removeItems(); 
    var inputWidth = document.getElementById("inputWidth").value; 
    var inputHeight = document.getElementById("inputHeight").value; 
    var inputNum = document.getElementById("inputNum").value; 
    var inputContWidth = document.getElementById("inputContWidth").value; 
    document.getElementById("container").style.width = inputContWidth; 
    for (var i = 0; i < inputNum; i++) { 
    var element = document.createElement("div"); 
    element.style.width = inputWidth; 
    element.style.height = inputHeight; 
    element.className = "item"; 
    document.getElementById("container").appendChild(element); 
    } 
} 

function removeItems() { 
    var elements = document.getElementsByClassName("item"); 
    while (elements.length > 0) { 
    elements[0].parentNode.removeChild(elements[0]); 
    } 
} 

そして、ここではcodepenです：http://codepen.io/gingerdeadshot/pen/JXZNGX