So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten

<div id="Behälter">
        <div Klasse="Box">
            <div Klasse="box-img">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div Klasse="Box">
            <div Klasse="box-img">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
        <div Klasse="Box">
            <div Klasse="box-img">
                <img src="./img/3.jpg" alt="">
            </div>
        </div>
     </div>
     ......<!-- Bilder ausgelassen, Sie können entscheiden, wie viele Bilder Sie möchten-->

*{
        Polsterung: 0;
        Rand: 0;
    }
    #Container{
        Position: relativ;
    }
    .Kasten{
        schweben: links;
        Polsterung: 15px;
    }
    .box-img {
        Breite: 150px;
        Polsterung: 5px;
        Rand: 1px durchgezogen #ccc;
        Kastenschatten: 0 0 5px #ccc;
        Rahmenradius: 5px;
    }
    .box-img img{
        Breite: 100 %;
        Höhe: automatisch;
    }

Funktion getChildElement() {
    const contentArr = [] //Definieren Sie ein Array, um das Laden von Bildern vorzubereiten const parent = document.getElementById(container) //Holen Sie die gesamte Seite const allContent = parent.getElementsByTagName('*') //Holen Sie das gesamte Tag console.log(allContent);
    für (var i = 0; i < allContent.length; i++) {
      wenn (allContent[i].className == 'box') {
        contentArr.push(allContent[i])//Lade das Label der Klasse='box' in das Array}
    }
    Konsole.log(InhaltArr);
    return contentArr //Array zurückgeben}

 var ccontent = getChildElemnt()
  var imgWidth = ccontent[0].offsetWidth // Alle Bilder gleich breit machen wie das erste Bild

var dWidth = document.documentElement.clientWidth //Seitenbreite var num = Math.floor(dWidth / imgWidth)
//Math.floor() rundet ab

var BoxHeightArr = [] //Definiere ein Array und trage nacheinander die Höhe aller Bilder darin ein for (var i = 0; i < ccontent.length; i++) {
      wenn (i < Zahl) {
        BoxHeightArr[i] = ccontent[i].offsetHeight //Speichere die Höhe des Bildes in einem Array} else { //Wenn die erste Zeile keine Bilder mehr aufnehmen kann var minHeight = Math.min.apply(null, BoxHeightArr) //Vergleiche die Mindesthöhe der vorherigen Zeile}
    }

//Definiere eine getMinHeightLocation-Funktion, übergebe ihr alle Bilder in der vorherigen Zeile von BoxHeightArr und die Mindesthöhe der Bilder in der vorherigen Zeile von minHeight function getMinHeightLocation(BoxHeightArr, minHeight) {
    für (var i in BoxHeightArr) {
      if (BoxHeightArr[i] === minHeight) { //Wenn die Bildhöhe gleich der Mindesthöhe ist, ist die Position des Bildes die Position des Bildes mit der Mindesthöhe return i
      }
    }
  }

    für (var i = 0; i < ccontent.length; i++) {
    wenn (i < Zahl) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } anders {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = 'absolute' //Das einzufügende Bild absolut positionieren, d. h. die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben ccontent[i].style.top = minHeight + 'px' //Den Abstand des eingefügten Bildes nach oben genau so einstellen, wie die Höhe des darunter einzufügenden Bildes ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' //Den Abstand des eingefügten Bildes nach ganz links genau so einstellen, wie den Abstand des darunter einzufügenden Bildes nach ganz links BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight //Nach dem Einfügen des Bildes muss die Höhe dieser Position auf die Summe der Höhen der beiden Bilder gesetzt werden}
  }

fenster.onload = funktion() {
  imgLocation('Container', 'Box') //Konstruktor imgLocation
}
//Verwende window.onload = function() {}, um die Funktion auszuführen, ohne auf den Aufruf auf der Hauptseite zu warten. //Ermitteln, wie viele Bilder aktuell platziert werden sollen. function imgLocation(parent, content) { //Lass parent='container', content='box'
  // Den gesamten Inhalt unter dem übergeordneten Element abrufen var cparent = document.getElementById(parent)
  var ccontent = getChildElemnt(cparent, Inhalt)
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(document.documentElement.clientWidth / imgWidth)
  cparent.style.cssText = „Breite: ${imgWidth * num} px“

  var BoxHeightArr = []
  für (var i = 0; i < ccontent.length; i++) {
    wenn (i < Zahl) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } anders {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = "absolut"
      ccontent[i].style.top = minHeight + 'px'
      ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
    }
  }
  // console.log(BoxHeightArr);
}


Funktion getChildElemnt(übergeordnetes Element, Inhalt) {übergeordnetes Element='Container', Inhalt='Box'
  const InhaltArr = []
  const allContent = parent.getElementsByTagName('*')
  console.log(alle Inhalte);
  für (var i = 0; i < allContent.length; i++) {
    wenn (allContent[i].className == content) {
      contentArr.push(alle Inhalte[i])
    }
  }
  Konsole.log(InhaltArr);
  InhaltArr zurückgeben
}

Funktion getMinHeightLocation(BoxHeightArr, minHeight) {
  für (var i in BoxHeightArr) {
    wenn (BoxHeightArr[i] === minHeight) {
      Rückkehr ich
    }
  }
}