1. 程式人生 > >js之瀑布流的實現

js之瀑布流的實現

cti 新的 info orm charset 遍歷 appdata cli ref

技術分享圖片 技術分享圖片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .onload_circle {
            
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -26px;
            margin-left: -26px;
            width: 50px;
            height: 50px;
            border: 1px solid orange;
            border-radius: 50%;
            transform-origin: center center;
            animation: rotate  1s infinite linear;
            transition: all 1s;
        }
 
        .ball {
            display: inline-block;
            width: 6px;
            height: 6px;
            
            border-radius: 50%;
            position: absolute;
            left: -3px;
            top: 23px;
        }
        @keyframes rotate  {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body style="">
    <div class="onload_circle">
        <span class="ball"></span>
    </div>
</body>
</html>

  

data.js文件
const data = [
    {
        url: ‘images/1.jpg‘,
        width: 432,
        height: 300,
    },
    {
        url: ‘images/2.jpg‘,
        width: 681,
        height: 966,
    },
    {
        url: ‘images/3.jpg‘,
        width: 480,
        height: 300,
    },
    {
        url: ‘images/4.jpg‘,
        width: 480,
        height: 300,
    },
    {
        url: ‘images/5.jpg‘,
        width: 683,
        height: 1024,
    },
    {
        url: ‘images/6.jpg‘,
        width: 682,
        height: 1024,
    },
    {
        url: ‘images/7.jpg‘,
        width: 1000,
        height: 1500,
    },{
        url: ‘images/8.jpg‘,
        width: 677,
        height: 966,
    },{
        url: ‘images/9.jpg‘,
        width: 667,
        height: 1000,
    },{
        url: ‘images/10.jpg‘,
        width: 400,
        height: 300,
    }
];

  

上js文件中的圖片路徑更改成自己需要的路徑即可。技術分享圖片 index.js文件
window.onload = function () {
    let oBox          = document.getElementById(‘box‘);
    let aPanel        = Array.from(oBox.children);
    const iPanelW  = aPanel[0].offsetWidth; // 記錄列的寬度
    const iImgW    = 220;
 
 
    // 計算最多容納列數
    let iWinW   = document.documentElement.clientWidth;
    let iWinH   = document.documentElement.clientHeight;
    let iMaxCol = Math.floor(iWinW / iPanelW);
 
    // 指定box的寬度
    oBox.style.width = iMaxCol * iPanelW + ‘px‘;
 
 
    // 記錄每一列的高度
    let aColH = [];
 
    // 遍歷指定位置
    aPanel.forEach((v, k) => {
        // 如果當前panel為第一排,則top為0
        if(k < iMaxCol) {
            v.style.top = 0;
            v.style.left = k * iPanelW + ‘px‘;
 
            // 記錄每一列的高度
            aColH.push(v.offsetHeight);
        } else {
            // 尋找最矮列的高度值和下標
            var iMinH = Math.min(...aColH);
            var iMinK = aColH.indexOf(iMinH);
 
 
            // 指定位置
            v.style.left = iMinK * iPanelW + ‘px‘;
            v.style.top  = iMinH + ‘px‘;
 
            // 更新列的高度
            aColH[iMinK] += v.offsetHeight;
        }
    });
 
 
    // 滾動加載新的數據
    var loadOK = true; // 可以加載新的數據
    window.onscroll = function () {
        let iScrollT = document.body.scrollTop || document.documentElement.scrollTop;
        let oLastPanel = aPanel[aPanel.length - 1];
        if(loadOK && (iWinH + iScrollT > oLastPanel.offsetTop + oLastPanel.offsetHeight / 2)) {
            loadOK = false;
            // 加載新的數據
            data.forEach(v => {
                let oNewPanel = document.createElement(‘div‘);
                oNewPanel.className = ‘panel‘;
 
                // 創建IMG
                let oNewImg = document.createElement(‘img‘);
                oNewImg.src = v.url;
 
                // 計算圖片等比縮放後實際的高度
                // 公式:iActualW / iActualH = iScaleW / iScaleH
                let iImgH = v.height * iImgW / v.width;
                oNewImg.style.height = iMinH + ‘px‘;
 
                oNewPanel.appendChild(oNewImg);
                oBox.appendChild(oNewPanel);
 
                // 尋找最矮列的高度值和下標
                var iMinH = Math.min(...aColH);
                var iMinK = aColH.indexOf(iMinH);
 
                oNewPanel.style.left = iMinK * iPanelW + ‘px‘;
                oNewPanel.style.top = iMinH + ‘px‘;
 
                // 更新列的高度
                aColH[iMinK] += oNewPanel.offsetHeight;
            });
 
            // 更新最後的列
            aPanel = Array.from(oBox.children);
 
            // 打開開關
            loadOK = true;
        }
    };
 
    window.onresize = function () {
        // 更新視窗的寬度和高度
        iWinW   = document.documentElement.clientWidth;
        iWinH   = document.documentElement.clientHeight;
 
        // 更新列數
        iMaxCol = Math.floor(iWinW / iPanelW);
 
        // 更新box的寬度
        oBox.style.width = iMaxCol * iPanelW + ‘px‘;
 
        // 重新排版
        aColH = [];
 
        // 遍歷指定位置
        aPanel.forEach((v, k) => {
            // 如果當前panel為第一排,則top為0
            if(k < iMaxCol) {
                v.style.top = 0;
                v.style.left = k * iPanelW + ‘px‘;
 
                // 記錄每一列的高度
                aColH.push(v.offsetHeight);
            } else {
                // 尋找最矮列的高度值和下標
                var iMinH = Math.min(...aColH);
                var iMinK = aColH.indexOf(iMinH);
 
                // 指定位置
                v.style.left = iMinK * iPanelW + ‘px‘;
                v.style.top  = iMinH + ‘px‘;
 
                // 更新列的高度
                aColH[iMinK] += v.offsetHeight;
            }
        });
    };
};

  

js之瀑布流的實現