JavaScript insert createElement till parent element is "full"-CodePudding

I've some wrapping element on my HTML page which has a relative width and height setting, to cover all of the available screen.

<body onl oad="init()">
    <div id="wrapper"  style="width:100%;height:100%;border:1px solid black">
    </div>
</body>

Next, I have Java Script which fills a fixed amount of new elements (SPAN boxes) in the wrapping DIV:

function init() {

        for (let i = 0; i < 200; i  ) {
        insertBox("X")
        }
    }


function insertBox(currentValue, index, arr){
    var new_element = document.createElement('span')
    new_element.id = currentValue
    new_element.innerHTML = currentValue;
    new_element.classList.add('box');
    document.getElementById('wrapper').appendChild(new_element)
}

The CSS definition is the following:

.box {
    background: #8b95f1;
    padding: 20px;
    font-size:1.0em;
    display: inline-block;
}

This code is working. However, how can I create exactly the amount of necessary SPAN boxes inside the wrapping DIV till it is "full" (more elements inserted are not visible anymore without scrolling)?

Thanks for any hint.

CodePudding user response：

Another answer, much simpler

Here I compare scrollHeight and offsetHeight, offsetHeight is the display height, scrollHeight is the actual overflow height, when offsetHeight >= scrollHeight, the wrapper is not filled

let wrapper = document.querySelector('#wrapper');

function init() {
  while (wrapper.scrollHeight < wrapper.offsetHeight) {
    insertBox("X");
  }
  wrapper.removeChild(wrapper.lastChild);
}


function insertBox(currentValue, index, arr) {
  var new_element = document.createElement('span')
  new_element.id = currentValue
  new_element.innerHTML = currentValue;
  new_element.classList.add('box');
  wrapper.appendChild(new_element)
}

.box {
  background: #8b95f1;
  padding: 20px;
  font-size: 1.0em;
  display: inline-block;
}

#wrapper {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  overflow: visible;
}

<body onl oad="init()">
  <div id="wrapper"  style="">
  </div>
</body>

I modified some css to make the wrapper have a max height

CodePudding user response：

Do mean something like this? I'm expecting that all boxes will always have the same sizing. I also added the event onresize in case of the window is changing it's size.

function loadboxes() {
    insertBox("X");
    var box = document.getElementById('X');
    var boxWidth = box.offsetWidth;
    var boxHeight = box.offsetHeight;

    var wrapper = document.getElementById('wrapper');
    var width = wrapper.offsetWidth;
    var height = wrapper.offsetHeight;
    wrapper.innerHTML = ''

    var maxAmountHorizontal = parseInt(width / boxWidth)
    var maxAmountVertical = parseInt(height / boxHeight)

    for (let i = 0; i < (maxAmountHorizontal * maxAmountVertical); i  )     {
        insertBox("X")
    }
 }


function insertBox(currentValue, index, arr) {
    var new_element = document.createElement('span')
    new_element.id = currentValue
    new_element.innerHTML = currentValue;
    new_element.classList.add('box');
    document.getElementById('wrapper').appendChild(new_element)
}

.box {
    background: #8b95f1;
    padding: 20px;
    font-size: 1.0em;
    display: inline-block;
}

<body onl oad="loadboxes()" onresize="loadboxes()">
    <div id="wrapper"  style="width:100%;height:100%;border:1px solid black">
    </div>
</body>

CodePudding user response：

Here I use Element.getBoundingClientRect() to calculate the max count of box

I append a temp box to the wrapper to calculate the size of box

function calcCount(){
  let wrapperRect = document.querySelector('#wrapper').getBoundingClientRect();
  let temp = document.createElement('span');
  temp.innerText = 'X';
  temp.className = 'box';
  wrapper.appendChild(temp);
  let tempRect = temp.getBoundingClientRect();
  wrapper.removeChild(temp);
  
  return Math.floor(wrapperRect.width / tempRect.width) * Math.floor(wrapperRect.height / tempRect.height);
}

//...
  let maxCount = calcCount();
  for (let i = 0; i < maxCount; i  ) {
//...