javascript實(shí)現(xiàn)圖片瀑布流的方法

什么是圖片瀑布流

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供普寧網(wǎng)站建設(shè)、普寧做網(wǎng)站、普寧網(wǎng)站設(shè)計(jì)、普寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、普寧企業(yè)網(wǎng)站模板建站服務(wù)，十載普寧做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。

用一張花瓣網(wǎng)頁的圖片布局可以很清楚看出圖片瀑布流的樣子：

1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。

2、唯美：圖片的風(fēng)格以唯美的圖片為主。

3、操作簡單：在瀏覽網(wǎng)站的時候只需要輕輕滑動一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。

javascript實(shí)現(xiàn)圖片瀑布流的方法

簡單來說，就是有很多圖片平鋪在頁面上，每張圖片的寬度相同，但是高度不同，這樣錯落有致的排列出 n 列的樣子很像瀑布，于是就有了瀑布流圖片一說。

實(shí)現(xiàn)原理

1、第一種方式

第一種方式前提是：圖片的寬度固定，但是列可變（根據(jù)屏幕大?。?/p>

通過上面的介紹，我們知道要實(shí)現(xiàn)瀑布流的前提是寬度一致（假如為100px），高度可以不相同。

我們首先確定排布的列數(shù)（假如為4列），那么第一行只能放4張圖片，然后將每個圖片的高度放入一個數(shù)組中（假如為 heightArr = [100,50, 200,30]），當(dāng)我們在放入下一張圖片的時候就要判斷這個數(shù)組中哪個高度是最小的（這里是30），然后還要知道最小的高度所在高度數(shù)組的索引（這里是i = 3），然后我們就可以對這張圖片進(jìn)行定位：

{
    position: absolute;
    left: i*100 + 'px';
    top: 30 + 'px'
}

如此遍歷剩下的圖片即可。

實(shí)現(xiàn)代碼

下面是未處理的原始代碼，圖片之間間隔很多空白，影響美觀。

<!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>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p class="box">
        <img src="./images/img/2-.jpg" alt="">
        <img src="./images/img/3-.jpg" alt="">
        <img src="./images/img/4-.jpg" alt="">
        <img src="./images/img/5-.jpg" alt="">
        <img src="./images/img/6-.jpg" alt="">
        <img src="./images/img/7-.jpg" alt="">
        <img src="./images/img/8-.jpg" alt="">
        <img src="./images/img/9-.jpg" alt="">
        <img src="./images/img/10-.jpg" alt="">
        <img src="./images/img/11-.jpg" alt="">
        <img src="./images/img/12-.jpg" alt="">
        <img src="./images/img/13-.jpg" alt="">
        <img src="./images/img/14-.jpg" alt="">
        <img src="./images/img/15-.jpg" alt="">
        <img src="./images/img/16-.jpg" alt="">
    </p>
</body>
</html>

javascript實(shí)現(xiàn)圖片瀑布流的方法

下面是處理后的代碼：

<!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>
        .box {
            position: relative;
        }
        img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p class="box">
        <img src="./images/img/2-.jpg" alt="">
        <img src="./images/img/3-.jpg" alt="">
        <img src="./images/img/4-.jpg" alt="">
        <img src="./images/img/5-.jpg" alt="">
        <img src="./images/img/6-.jpg" alt="">
        <img src="./images/img/7-.jpg" alt="">
        <img src="./images/img/8-.jpg" alt="">
        <img src="./images/img/9-.jpg" alt="">
        <img src="./images/img/10-.jpg" alt="">
        <img src="./images/img/11-.jpg" alt="">
        <img src="./images/img/12-.jpg" alt="">
        <img src="./images/img/13-.jpg" alt="">
        <img src="./images/img/14-.jpg" alt="">
        <img src="./images/img/15-.jpg" alt="">
        <img src="./images/img/16-.jpg" alt="">
    </p>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        // 獲取圖片的寬度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流處理
        function waterfallHandler() {
            // 獲取圖片的列數(shù)
            let column = parseInt($(window).width() / imgWidth);

            // 高度數(shù)組
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍歷所有圖片進(jìn)行定位處理
            $.each($('img'), function (index, item) {
                // 當(dāng)前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度數(shù)組最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度數(shù)組最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);
                
                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }
        
        // 窗口大小改變
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>
</html>

javascript實(shí)現(xiàn)圖片瀑布流的方法

2、第二種方式

第二種方式前提是：列是固定的個數(shù)，然后圖片根據(jù)屏幕的寬度進(jìn)行自適應(yīng)縮放。

這種方式由于圖片是可以縮放的，寬高不好確定，因此不好用定位的方式處理。

我們可以這樣處理，既然知道了列，那么每一列做一個容器。然后遍歷圖片，將圖片放入容器高度最小的容器中即可。

這里我們使用js來添加圖片，而不是事先寫好在html中了。

實(shí)現(xiàn)代碼

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
        }
    </style>
</head>

<body>
</body>
<script src="./jquery.min.js"></script>
<script>
    $(function () {
        const COLUMN = 4; // 4列
        let arr = []; // 存儲4列l(wèi)i
        let minHeight = [] // 存儲4列的高度

        create();

        function create() {
            // 創(chuàng)建ul li作為每一列的容器
            $("<ul></ul>").appendTo($("body")).css("width", "100%");
            for (let i = 0; i < COLUMN; i++) {
                var li = document.createElement("li");
                $(li).appendTo($("ul"))
                    .css({
                        "width": "24%",
                        "margin": "0 0.5%"
                    });
                arr.push(li);
                // console.log(arr);
                minHeight.push(0);
            }
            createImg();
        }

        function createImg() {
            let img = new Image();
            img.num = 2;
            img.src = `./images/img/${img.num}-.jpg`; // 素材圖片的規(guī)律為 2-.jpg 3-.jpg 4-.jpg ...
            $(img).css("width", "100%");
            // 當(dāng)圖片加載完后
            $(img).on("load", loadHandler);
        }

        function loadHandler() {
            // 高度數(shù)組的最小值
            let min = Math.min.apply(null, minHeight);
            // 高度數(shù)組的最小值索引
            let minIndex = minHeight.indexOf(min);
            // 克隆一份圖片
            let im = this.cloneNode(true);
            // 將圖片假如對應(yīng)最小值索引的容器中
            arr[minIndex].append(im);
            // 更新最小值索引的容器的高度
            minHeight[minIndex] += im.getBoundingClientRect().height;

            this.num++;

            // 圖片的個數(shù)只有79張
            if (this.num > 79) {
                $(this).off("load", loadHandler);
                return;
            }
            this.src = `./images/img/${this.num}-.jpg`;
        }
    });
</script>

</html>

javascript實(shí)現(xiàn)圖片瀑布流的方法

以上就是js實(shí)現(xiàn)圖片瀑布流的兩種方式（附代碼）的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

標(biāo)題名稱：javascript實(shí)現(xiàn)圖片瀑布流的方法
轉(zhuǎn)載來于：http://bm7419.com/article8/jdgpip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、動態(tài)網(wǎng)站、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容