js native Wasserfall-Flow-Plugin-Produktion

<Text>
    <div Klasse="main"></div>
 
    <script src="index.js"></script>
    <Skript>
        // Der erste Parameter, Wasserfallcontainer var dom = document.getElementsByClassName("main")[0];
        // Der zweite Parameter, der Bildlink, wird in ein Array geschrieben var imgArr = ["img/0.jpg","img/45.jpg","img/225.jpg","img/3.png","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png","img/0.jpg","img/3.png","img/45.jpg","img/225.jpg","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png",];
        //Rufen Sie das Plug-In auf und übergeben Sie Parameter. Der dritte ist die Bildbreite.waterFallFlow(dom,imgArr,220);
    </Skript>
</body>

.hauptsächlich{
    Rand: 1px durchgezogen #ccc;
    Breite: 90%;
    Rand: 0 automatisch;
    Position: relativ;
}
.Hauptbild{
    Übergang: alle 0,5 s;
}

/**
 * @param {*} dom stellt den Wasserfallcontainer dar* @param {*} imgArr Bildarray* @param {*} wid Bildbreite*/
Funktion WasserfallFluss(dom, imgArr, wid) {
    var gap; //Lücke var colNumber; //Anzahl der Spalten imgDom();
    setImgPos();
    //Wenn sich das Fenster ändert window.onresize = function(){
        setImgPos();
    }
    /**var Timer = null;
     * Es ist reibungslos, wie oben beschrieben, beeinträchtigt jedoch die Leistung zu sehr. Beim Ziehen des Fensters * wird die Funktion sehr häufig aufgerufen, um die Bilder neu aufzunehmen und anzuordnen * 
     * Das schaffst du, Anti-Shake* 
     * Fenster.onresize = Funktion(){
     * wenn(Zeitgeber){
     * clearIntval(Zeitgeber);
     * }
     * Timer = setzeTimeout(Funktion(){
     * setImgPos();
     * },300);
     * }
     * 
     */
    // DOM-Element generieren Funktion imgDom() {
        für (sei i = 0; i < imgArr.length; i++) {
            const url = imgArr[i];
            let img = document.createElement("img");
            img.src = URL;
            img.style.width = Breite + "px";
            img.style.position = "absolut";
            // Alle Bilder verwenden die absolute Positionierung img.style.left = "";
            img.style.top = "";
            img.onload = Funktion(){
                setImgPos(); //Asynchrones Laden von Bildern}
            dom.appendChild(img);
        }
    }
    // Die Koordinaten jedes Bildes festlegen function setImgPos() {
        kal();
        var colY = new Array(colNumber); //Speichere die Y-Koordinate des nächsten Bildes in jeder Spalte colY.fill(0); //Fülle das Array auf 0
        für (lass i = 0; i < dom.children.length; i++) {
            var imgM = dom.children[i];
            var y = Math.min(...colY); // Minimalwert finden var index = colY.indexOf(y); // Spalte var x = (index + 1) * gap + index * wid;
            imgM.style.left = x + "px";
            imgM.style.top = y + "px";
            //Array aktualisieren colY[index] += parseInt(imgM.height)+gap;
        }
        //Finden Sie die größte Zahl im Array, um das Problem des Zusammenbruchs des übergeordneten Divs zu lösen. var h = Math.max(...colY);
        console.log(h);
        dom.style.height = h + "px";
    }
    // Relevante Daten berechnen Funktion cal() {
        var containerWidth = parseInt(dom.clientWidth);
        colNumber = Math.floor(containerWidth / wid); //Anzahl der Spalten var space = containerWidth - colNumber * wid;
        Lücke = Leerzeichen / (Spaltennummer + 1); //Lücke berechnen}
}