JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

<div id="コンテナ">
        <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>
     ......<!-- 写真は省略されています。必要な写真の枚数は自由に決められます-->

*{
        パディング: 0;
        マージン: 0;
    }
    ＃容器{
        位置: 相対的;
    }
    。箱{
        フロート: 左;
        パディング: 15px;
    }
    .box-img {
        幅: 150ピクセル;
        パディング: 5px;
        境界線: 1px実線 #ccc ;
        ボックスシャドウ: 0 0 5px #ccc;
        境界線の半径: 5px;
    }
    .box-img 画像{
        幅: 100%;
        高さ: 自動;
    }

関数 getChildElement() {
    const contentArr = [] // 画像の読み込みに備えて配列を定義します。 const parent = document.getElementById(container) // ページ全体を取得します。 const allContent = parent.getElementsByTagName('*') // タグ全体を取得します。 console.log(allContent);
    (var i = 0; i < allContent.length; i++) {
      if (allContent[i].className == 'box') {
        contentArr.push(allContent[i])//class='box'のラベルを配列に読み込みます}
    }
    コンソールにログ出力します。
    return contentArr //配列を返す}

 var ccontent = getChildElement()
  var imgWidth = ccontent[0].offsetWidth // すべての画像の幅を最初の画像と同じにする

var dWidth = document.documentElement.clientWidth // ページ幅 var num = Math.floor(dWidth / imgWidth)
//Math.floor() は切り捨てます

var BoxHeightArr = [] //配列を定義し、各画像の高さを順番にそこに入れます for (var i = 0; i < ccontent.length; i++) {
      もし（i < 数値）{
        BoxHeightArr[i] = ccontent[i].offsetHeight //画像の高さを配列に格納します} else { //最初の行に画像が収まらなくなった場合 var minHeight = Math.min.apply(null, BoxHeightArr) //前の行の最小の高さを比較します}
    }

//getMinHeightLocation 関数を定義し、BoxHeightArr の前の行にあるすべての画像と minHeight の前の行にある画像の最小の高さを渡します。関数 getMinHeightLocation(BoxHeightArr, minHeight) {
    (変数 i 内の BoxHeightArr) {
      if (BoxHeightArr[i] === minHeight) { //画像の高さが最小の高さに等しい場合、画像の位置は最小の高さの画像の位置になります return i
      }
    }
  }

    (var i = 0; i < ccontent.length; i++) {
    もし（i < 数値）{
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } それ以外 {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = 'absolute' //挿入する画像を絶対的に配置します。つまり、要素の位置は「left」、「top」、「right」、および「bottom」属性によって指定されます。 ccontent[i].style.top = minHeight + 'px' //挿入された画像から上端までの距離が、その下に挿入される画像の高さとちょうど等しくなるようにします。 ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' //挿入された画像から左端までの距離が、その下に挿入される画像から左端までの距離とちょうど等しくなります。 BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight //画像を挿入した後、この位置の高さは 2 つの画像の高さの合計に設定する必要があります。}
  }

window.onload = 関数() {
  imgLocation('container', 'box') //コンストラクタ imgLocation
}
//本文ページでの呼び出しを待たずに実行するには、window.onload = function() {} 関数を使用します //現在配置されている画像の数を取得します function imgLocation(parent, content) { //parent='container'、content='box' とします
  // 親の下にあるすべてのコンテンツを取得します var cparent = document.getElementById(parent)
  var ccontent = getChildElement(cparent, コンテンツ)
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(document.documentElement.clientWidth / imgWidth)
  cparent.style.cssText = `幅: ${imgWidth * num} px`

  var ボックス高さArr = []
  (var i = 0; i < ccontent.length; i++) {
    もし（i < 数値）{
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } それ以外 {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = '絶対'
      ccontent[i].style.top = minHeight + 'px'
      ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
    }
  }
  // コンソールログ(BoxHeightArr);
}


関数 getChildElemnt(親、コンテンツ) {親='コンテナ'、コンテンツ='ボックス'
  定数コンテンツArr = []
  const allContent = parent.getElementsByTagName('*')
  コンソールにログ出力します。
  (var i = 0; i < allContent.length; i++) {
    if (allContent[i].className == コンテンツ) {
      contentArr.push(すべてのコンテンツ[i])
    }
  }
  コンソールにログ出力します。
  コンテンツを返すArr
}

関数 getMinHeightLocation(BoxHeightArr, minHeight) {
  (変数 i 内の BoxHeightArr) {
    BoxHeightArr[i] === minHeight の場合 {
      戻る
    }
  }
}