如何在直播軟體搭建中，實現圖片瀑布流效果？

雲豹科技程式設計師發表於2021-10-08

什麼是圖片瀑布流

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

實現原理

1、第一種方式

第一種方式前提是：圖片的寬度固定，但是列可變（根據螢幕大小）

通過上面的介紹，我們知道要在直播軟體搭建中實現瀑布流的前提是寬度一致（假如為100px），高度可以不相同。

我們首先確定直播軟體搭建排布的列數（假如為4列），那麼第一行只能放4張圖片，然後將每個圖片的高度放入一個陣列中（假如為 heightArr = [100,50, 200,30]），當我們在放入下一張圖片的時候就要判斷這個陣列中哪個高度是最小的（這裡是30），然後還要知道最小的高度所在高度陣列的索引（這裡是i = 3），然後我們就可以對這張圖片進行定位：

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

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

實現程式碼

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

<!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>
    <div 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="">
    </div></body></html>

下面是處理後的程式碼：

<script>
    $(function () {
        // 獲取圖片的寬度(200px)
        let imgWidth = $('img').outerWidth(); // 200
        waterfallHandler();
        // 瀑布流處理
        function waterfallHandler() {
            // 獲取圖片的列數
            let column = parseInt($(window).width() / imgWidth);
            // 高度陣列
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }
            // 遍歷所有圖片進行定位處理
            $.each($('img'), function (index, item) {
                // 當前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度陣列最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度陣列最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);
                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });
                heightArr[minIndex] += itemHeight;
            });
        }
        // 視窗大小改變
        $(window).resize(function () {
            waterfallHandler();
        });
    });</script>

2、第二種方式

第二種方式前提是：列是固定的個數，然後圖片根據螢幕的寬度進行自適應縮放

這種方式由於圖片是可以縮放的，寬高不好確定，因此在直播軟體搭建時不好用定位的方式處理。
我們可以這樣處理，既然知道了列，那麼每一列做一個容器。然後遍歷圖片，將圖片放入容器高度最小的容器中即可。

這裡我們使用js來新增圖片，而不是事先寫好在html中了。

實現程式碼

<!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列li
        let minHeight = [] // 儲存4列的高度
        create();
        function create() {
            // 建立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`; // 素材圖片的規律為 2-.jpg 3-.jpg 4-.jpg ...
            $(img).css("width", "100%");
            // 當圖片載入完後
            $(img).on("load", loadHandler);
        }
        function loadHandler() {
            // 高度陣列的最小值
            let min = Math.min.apply(null, minHeight);
            // 高度陣列的最小值索引
            let minIndex = minHeight.indexOf(min);
            // 克隆一份圖片
            let im = this.cloneNode(true);
            // 將圖片假如對應最小值索引的容器中
            arr[minIndex].append(im);
            // 更新最小值索引的容器的高度
            minHeight[minIndex] += im.getBoundingClientRect().height;
            this.num++;
            // 圖片的個數只有79張
            if (this.num > 79) {
                $(this).off("load", loadHandler);
                return;
            }
            this.src = `./images/img/${this.num}-.jpg`;
        }
    });</script></html>

以上便是“直播軟體搭建圖片瀑布流，就是如此簡單”的全部內容，瀑布流式的圖片展示方式會讓使用者使用起來更舒適，希望能在搭建進行直播軟體搭建時提供幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2794944/，如需轉載，請註明出處，否則將追究法律責任。

相關文章