jsネイティブウォーターフォールフロープラグイン制作

<本文>
    <div class="main"></div>
 
    <script src="index.js"></script>
    <スクリプト>
        // 最初のパラメーター、ウォーターフォール コンテナー var dom = document.getElementsByClassName("main")[0];
        // 2 番目のパラメータである画像リンクは配列に書き込まれます 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",];
        // プラグインを呼び出してパラメータを渡します。3 番目は画像 width.waterFallFlow(dom,imgArr,220); です。
    </スクリプト>
</本文>

。主要{
    境界線: 1px 実線 #ccc;
    幅: 90%;
    マージン: 0 自動;
    位置: 相対的;
}
.メイン画像{
    遷移: すべて 0.5 秒;
}

/**
 * @param {*} dom はウォーターフォールコンテナを表します* @param {*} imgArr 画像配列* @param {*} wid 画像の幅*/
関数 waterFallFlow(dom, imgArr, wid) {
    var gap; //ギャップ var colNumber; //列数 imgDom();
    画像の位置を設定します。
    //ウィンドウが変更されたとき window.onresize = function(){
        画像の位置を設定します。
    }
    /**var タイマー = null;
     * 上に書いたようにスムーズですが、パフォーマンスに影響しすぎます。ウィンドウをドラッグすると、* 写真を撮り直して配置するために関数が頻繁に呼び出されます * 
     * 手ぶれ補正はこれでもできる* 
     * window.onresize = 関数(){
     * if(タイマー){
     * clearIntval(タイマー);
     * }
     * タイマー = setTimeout(関数(){
     * setImgPos();
     * },300);
     * }
     * 
     */
    // DOM要素を生成する function imgDom() {
        (i = 0 とします; i < imgArr.length; i++) {
            const url = imgArr[i];
            img = document.createElement("img"); とします。
            url = 画像ファイル
            img.style.width = wid + "px";
            img.style.position = "絶対";
            // すべての画像は絶対配置を使用します img.style.left = "";
            スタイルトップ = "";
            img.onload = 関数(){
                setImgPos(); //画像の非同期読み込み}
            dom.appendChild(画像);
        }
    }
    // 各画像の座標を設定する function setImgPos() {
        cal();
        var colY = new Array(colNumber); //各列に次の画像のY座標を格納する colY.fill(0); //配列を0にする
        (i = 0 とします; i < dom.children.length; i++) {
            var imgM = dom.children[i];
            var y = Math.min(...colY); // 最小値を見つける var index = colY.indexOf(y); // 列 var x = (index + 1) * gap + index * wid;
            imgM.style.left = x + "px";
            imgM.style.top = y + "px";
            //配列を更新 colY[index] += parseInt(imgM.height)+gap;
        }
        // 配列内の最大数を見つけて、親 div の折りたたみ問題を解決します var h = Math.max(...colY);
        コンソールログ(h);
        dom.style.height = h + "px";
    }
    // 関連データを計算する function cal() {
        var コンテナの幅 = parseInt(dom.clientWidth);
        colNumber = Math.floor(containerWidth / wid); //列数 var space = containerWidth - colNumber * wid;
        gap = space / (colNumber + 1); //ギャップを計算する}
}