How to use JS to implement waterfall layout of web pages

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/3.jpg" alt="">
            </div>
        </div>
     </div>
     ......<!-- Pictures omitted, you can decide how many pictures you want-->

*{
        padding: 0;
        margin: 0;
    }
    #container{
        position: relative;
    }
    .box{
        float: left;
        padding: 15px;
    }
    .box-img {
        width: 150px;
        padding: 5px;
        border: 1px solid #ccc ;
        box-shadow: 0 0 5px #ccc;
        border-radius: 5px;
    }
    .box-img img{
        width: 100%;
        height: auto;
    }

function getChildElemnt() {
    const contentArr = [] //Define an array to prepare for loading images const parent = document.getElementById(container) //Get the entire page const allContent = parent.getElementsByTagName('*') //Get the entire tag console.log(allContent);
    for (var i = 0; i < allContent.length; i++) {
      if (allContent[i].className == 'box') {
        contentArr.push(allContent[i])//Load the label of class='box' into the array}
    }
    console.log(contentArr);
    return contentArr //Return array}

 var ccontent = getChildElemnt()
  var imgWidth = ccontent[0].offsetWidth // Make all images equal in width to the first image

var dWidth = document.documentElement.clientWidth //page width var num = Math.floor(dWidth / imgWidth)
//Math.floor() rounds down

var BoxHeightArr = [] //Define an array and put the height of each picture into it in turn for (var i = 0; i < ccontent.length; i++) {
      if (i < num) {
        BoxHeightArr[i] = ccontent[i].offsetHeight //Store the height of the image in an array} else { //When the first row can no longer hold images var minHeight = Math.min.apply(null, BoxHeightArr) //Compare the minimum height of the previous row}
    }

//Define a getMinHeightLocation function, pass it all the pictures in the previous row of BoxHeightArr and the minimum height of the pictures in the previous row of minHeight function getMinHeightLocation(BoxHeightArr, minHeight) {
    for (var i in BoxHeightArr) {
      if (BoxHeightArr[i] === minHeight) { //When the image height is equal to the minimum height, the position of the image is the position of the minimum height image return i
      }
    }
  }

    for (var i = 0; i < ccontent.length; i++) {
    if (i < num) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } else {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = 'absolute' //Absolutely position the image to be inserted, that is, the position of the element is specified by the "left", "top", "right" and "bottom" attributes ccontent[i].style.top = minHeight + 'px' //Make the distance from the inserted image to the top just equal to the height of the image to be inserted below it ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' //Make the distance from the inserted image to the leftmost just equal to the distance from the image to be inserted below it to the leftmost BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight //After inserting the image, the height of this position must be set to the sum of the heights of the two images}
  }

window.onload = function() {
  imgLocation('container', 'box') //Constructor imgLocation
}
//Use window.onload = function() {} function to execute without waiting for the call in the body page //Get how many pictures are currently to be placed function imgLocation(parent, content) { //Let parent='container', content='box'
  // Get all the content under parent var cparent = document.getElementById(parent)
  var ccontent = getChildElemnt(cparent, content)
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(document.documentElement.clientWidth / imgWidth)
  cparent.style.cssText = `width: ${imgWidth * num} px`

  var BoxHeightArr = []
  for (var i = 0; i < ccontent.length; i++) {
    if (i < num) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } else {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = 'absolute'
      ccontent[i].style.top = minHeight + 'px'
      ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
    }
  }
  // console.log(BoxHeightArr);
}


function getChildElemnt(parent, content) {parent='container', content='box'
  const contentArr = []
  const allContent = parent.getElementsByTagName('*')
  console.log(allContent);
  for (var i = 0; i < allContent.length; i++) {
    if (allContent[i].className == content) {
      contentArr.push(allContent[i])
    }
  }
  console.log(contentArr);
  return contentArr
}

function getMinHeightLocation(BoxHeightArr, minHeight) {
  for (var i in BoxHeightArr) {
    if (BoxHeightArr[i] === minHeight) {
      return i
    }
  }
}