希望分发div对象

Question

I want to do a web page which can distribute objects hopefully considering the height and the width of the objects inputted.

In the first page I input the height and the width of the object, the quantity of that object, and a limit per row. And the second page will show the objects distributed.

Example:

object 35x60cm, 3 quantities | object 60x60cm, 4 quantities | object 70x70cm, 5 quantities and the limit is 200 cm a row.

The object will have distribute hopefully and when the 200cm per row is reached, another row will be added and the remain objects will situate in the 2nd row, and if the second row is not enough, then it will be a 3rd row, and so on.

Objects will be like divs!

Thanks in advance!

Answer 1

You could accomplish the distribution with CSS and JS only. Here's the HTML code:

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

And the CSS code for the distribution. This is both to distribute the items and to make them visible:

#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;
}

Then use Javascript to add as many items as needed using the inputs:

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]);
  }
}

And here's the codepen: http://codepen.io/gingerdeadshot/pen/JXZNGX