JS圖片瀑布流製做

時間 2019-11-19

原文原文鏈接

這裏爲你們帶來了兩種經過js製做圖片瀑布流的方法。html

1、絕對定位法數組

計算每一個元素的絕對位置進行設置。app

<!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>瀑布流</title>
    <style>
        .image-item {
            width: 300px;
            position: absolute;
            transition: all .5s;

        }
        .image-item .image {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="image-item"><img src="./images/zj1.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj2.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj3.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj4.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj5.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj6.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj7.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj8.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj9.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj10.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj11.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj12.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj13.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj14.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj15.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj16.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj17.jpg" alt="" class="image"></div>
        <div class="image-item"><img src="./images/zj18.jpg" alt="" class="image"></div>
    </div>
</body>
<script>
const config = {
    mode: 0,
    marginHeight: 20,
}

window.onload = function() {
    init();
}

function init() {
    let {mode} = config;
    config.imagesArray = document.querySelectorAll(".image-item");

    const windowWidth = document.querySelector(".wrap").getBoundingClientRect().width; // 容器寬度
    const imageWidth =  config.imagesArray[0].getBoundingClientRect().width; // 單張圖片寬度
    config.imageWidth = imageWidth;
    config.cols = parseInt(windowWidth/imageWidth); // 計算列數
    //計算圖片之間的間距(可選擇space-between/space-around)
    let spanNum = mode ? config.cols -1 : config.cols +1;
    config.margin = (windowWidth - imageWidth * config.cols) / spanNum;
    
    config.heightArray = (new Array(config.cols)).fill(0,0); //獲得初始高度的數組

    setImagePos();
}

function setImagePos() {
    let { imageWidth, imagesArray, margin, heightArray, mode } = config;
    imagesArray.forEach(item => {
        //取高度數組中的最小值
        let minHeight = Math.min.apply(Math.min, heightArray);
        let currentIndex = heightArray.indexOf(minHeight);
        // 設置圖片位置
        item.style.top = minHeight + "px";
        if(mode) {
            item.style.left = currentIndex * (imageWidth + margin) + "px";
        } else {
            item.style.left = currentIndex * (imageWidth + margin) + margin + "px";
        }
        

        //更新高度數組
        let newHeight = item.getBoundingClientRect().height + config.marginHeight;
        heightArray[currentIndex] += newHeight;
    });
}

let timer;
window.onresize = function() {
    clearTimeout(timer);
    timer = setTimeout(init, 50);
}
</script>
</html>

2、按列插入法性能

首先計算出能夠放幾列圖片，再插入列容器，在循環圖片，往高度最小的列容器中插入圖片。學習

<!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>瀑布流2</title>
    <style>
        #wrap {
            display: flex;
            justify-content: space-around;
        }
        #wrap .col img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>
</body>
<script>

// 建立圖片數組(因爲圖片名有規律，這裏就不一個一個寫)
const images = [];
for(var i = 1; i <= 18; i ++) {
    var src = "./images/zj" + i + ".jpg";
    images.push(src);
}


var wrap = document.getElementById("wrap");
var colWidth = 300; //每列寬度
var colsArray = []; // 列DOM數組
var heightArray = []; // 高度數組
var currentImage = 0; //圖片索引
var oldCols = null; //用做記錄，節約性能
var timer;

init();
window.onresize = function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        init();
    }, 50);
}

function init() {
    // 獲得對應的列數，並建立每列的容器
    var windwoWidth = window.innerWidth;
    var cols = parseInt(windwoWidth / colWidth);
    if(cols !== oldCols) {
        oldCols = cols;
        //清空數據
        colsArray = [];
        heightArray = [];
        currentImage = 0;
        wrap.innerHTML = "";
        // 建立列容器
        for(var i = 0; i < cols; i++) {
            var col = createElement("div",{"class":"col"});
            colsArray.push(col);
            wrap.appendChild(col);
            heightArray.push(0);
        }

        //循環圖片數據
        pushImage();
    }
}

function createElement(tagName,dataset) {
    var tag = document.createElement(tagName);
    for(key in dataset) {
        tag.setAttribute(key,dataset[key]);
    }
    return tag;
}

function pushImage(dataset) {
    var dataset = {
        "src": images[currentImage]
    };
    var image = createElement("img",dataset);
    var min = Math.min.apply(Math.min, heightArray);
    var currentIndex = heightArray.indexOf(min);
    colsArray[currentIndex].appendChild(image);
    image.onload = function() {
        // 當圖片達到最大時，不執行
        if(currentImage < images.length -1 ) {
            // 計算加入圖片後的容器高度
            var imageHeight = image.getBoundingClientRect().height;
            console.log(image.getBoundingClientRect())
            heightArray[currentIndex] += imageHeight;
            // 圖片索引累加
            currentImage ++;
            pushImage();
        } else {
            return false;
        }
    }
}
</script>
</html>

固然確定還有比這個好的方法，僅做學習交流。flex

ps：圖片存放地址爲當前目錄的images目錄裏面ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。