js原生瀑布流插件制作

更新時間：2021年10月04日 09:08:57 作者：墨者羽晨

這篇文章主要為大家詳細介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js原生瀑布流插件制作的具體代碼，供大家參考，具體內(nèi)容如下

和普通的瀑布流是一樣的，在調(diào)用時制需要傳入容器，圖片以及圖片寬度即可直接生成瀑布流

話不多說，看代碼，后面說一下思路

1.html以及調(diào)用，其中HTML只需要一行

<body>
    <div class="main"></div>
 
    <script src="index.js"></script>
    <script>
        // 第一個參數(shù)，瀑布流容器
        var dom = document.getElementsByClassName("main")[0];
        // 第二個參數(shù)，圖片鏈接，寫入一個數(shù)組
        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",];
        // 調(diào)用插件，傳入?yún)?shù)，第三個是圖片寬度
        waterFallFlow(dom,imgArr,220);
    </script>
</body>

2.HTML對應的css

.main是傳入的容器，其中position: relative;是必須要的

然后.main img{transition: all 0.5s;}是動畫代碼，給容器內(nèi)所有圖片添加

.main{
    border: 1px solid #ccc;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.main img{
    transition: all 0.5s;
}

然后是js

/**
 * @param {*} dom 代表瀑布流容器
 * @param {*} imgArr 圖片數(shù)組
 * @param {*} wid 圖片寬度
 */
function waterFallFlow(dom, imgArr, wid) {
    var gap;//間隙
    var colNumber;//列數(shù)
    imgDom();
    setImgPos();
    //窗口發(fā)生改變的時候
    window.onresize = function(){
        setImgPos();
    }
    /**var timer = null;
     * 上面這么寫，絲滑，但是過于影響性能，拖動窗口時
     * 非常非常頻繁的調(diào)用函數(shù)對圖片進行重新拍排布
     * 
     * 可以這樣，防抖
     * 
     * window.onresize = function(){
     * if(timer){
     *  clearIntval(timer);
     * }
     *  timer = setTimeout(function(){
     *  setImgPos();
     * },300);
     * }
     * 
     */
    // 生成DOM元素
    function imgDom() {
        for (let i = 0; i < imgArr.length; i++) {
            const url = imgArr[i];
            let img = document.createElement("img");
            img.src = url;
            img.style.width = wid + "px";
            img.style.position = "absolute";
            // 所有圖片使用絕對定位
            img.style.left = "";
            img.style.top = "";
            img.onload = function(){
                setImgPos();//圖片的異步加載
            }
            dom.appendChild(img);
        }
    }
    // 設置每張圖片的坐標
    function setImgPos() {
        cal();
        var colY = new Array(colNumber);//存放每一列下一個圖片的Y坐標
        colY.fill(0);//填充數(shù)組為0
        for (let 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";
            //更新數(shù)組
            colY[index] += parseInt(imgM.height)+gap;
        }
        //找到數(shù)組中最大的數(shù)字，來解決父級div塌陷問題
        var h = Math.max(...colY);
        console.log(h);
        dom.style.height = h + "px";
    }
    // 計算相關數(shù)據(jù)
    function cal() {
        var containerWidth = parseInt(dom.clientWidth);
        colNumber = Math.floor(containerWidth / wid);//列數(shù)
        var space = containerWidth - colNumber * wid;
        gap = space / (colNumber + 1);//計算間隙
 
    }
}

基本上我都寫了注釋，都可以看懂

來看思路

1.接受傳入的參數(shù)，容器，圖片數(shù)組，圖片寬度

2.創(chuàng)建圖片元素，添加到對應容器中

3.給每個圖片設置寬度，高度自適應，求列數(shù)，間距

4.給圖片利用絕對定位來排布圖片，計算對應的left和top值，也就是對應的x,y坐標

前三步應該沒有問題，來看第四步

想法是這樣的

主要思路就是尋找最短的一列來排布下一張圖片，現(xiàn)在最短出現(xiàn)在第二列

這個時候圖片添加到了之前最短的第二列，現(xiàn)在繼續(xù)尋找最短的一列，繼續(xù)添加圖片

這樣此類推完成瀑布流的排布，來看看具體過程

首先計算出一共有幾列圖片，創(chuàng)建一個長度為列數(shù)的數(shù)組，全部填充為0，用來后面存放y坐標

遍歷容器內(nèi)子元素，在循環(huán)中求出當前數(shù)組中最小值以及最小值所在位置（列數(shù)）就是y坐標

這個時候就可以求x坐標了

x = （列數(shù)+1）* 間距 + 當前列 * 寬度（傳入的實參）

這樣就有了位置

要注意每次需要更新一下數(shù)組，就是修改添加圖片位置的y坐標，以及圖片的異步加載

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

javascript格式化日期時間方法匯總
本文給大家匯總介紹了javascript格式化日期時間的五種常用方法，個人對第五種個性化輸出時間比較有興趣，基本上只要項目中能用到都是使用第五種，推薦給小伙伴們。
2015-06-06
JavaScript作用域鏈使用介紹
作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域
2013-08-08
簡單實例處理url特殊符號&處理(2種方法)
url里的參數(shù)內(nèi)容包含&符合，我有兩種方法解決一是：在頁面用JS轉碼;二是：在后端處理，另外還有網(wǎng)絡分享的一些方法，感興趣的朋友可以參考下哈
2013-04-04
Bootstrap實現(xiàn)下拉菜單效果
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單效果的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
微信小程序methods中定義的方法互相調(diào)用的實例代碼
這篇文章主要介紹了微信小程序methods中定義的方法互相調(diào)用的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-08-08
JavaScript中object和Object的區(qū)別(詳解)
下面小編就為大家?guī)硪黄狫avaScript中object和Object的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
javascript實現(xiàn)驗證身份證號的有效性并提示
下面分享的JS腳本是我用過的最完善的身份證號的驗證程序了，因為只有真正的身份證號才能被通過，小伙伴們可以試試。直接復制運行。
2015-04-04
用cookies實現(xiàn)的可記憶的樣式切換效果代碼下載
比較不錯的用cookies實現(xiàn)的可記憶的樣式切換效果，這個思路也在一定程序，方便客戶的長期使用。
2007-12-12
6種JavaScript判斷對象自身為空的方法小結
這篇文章主要為大家詳細介紹了6種JavaScript判斷對象自身為空的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12
淺談js圖片前端預覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)硪黄獪\談js圖片前端預覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06