溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么實現(xiàn)瀑布流布局

發(fā)布時間：2021-04-17 15:59:12 來源：億速云 閱讀：179 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)怎么實現(xiàn)瀑布流布局，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

一、JS 實現(xiàn)瀑布流

思路分析

  • 瀑布流布局的特點是等寬不等高。

  • 為了讓最后一行的差距最小，從第二行開始，需要將圖片放在第一行最矮的圖片下面，以此類推。

  • 父元素設(shè)置為相對定位，圖片所在元素設(shè)置為絕對定位。然后通過設(shè)置 top 值和 left 值定位每個元素。

代碼實現(xiàn)

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100%;
            position:relative;
        }
        .item {
            position: absolute;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
    function waterFall() {
        // 1 確定圖片的寬度 - 滾動條寬度
        var pageWidth = getClient().width-8;
        var columns = 3; //3列
        var itemWidth = parseInt(pageWidth/columns); //得到item的寬度
        $(".item").width(itemWidth); //設(shè)置到item的寬度
        var arr = [];
        $(".box .item").each(function(i){
            var height = $(this).find("img").height();
            if (i < columns) {
                // 2 第一行按序布局
                $(this).css({
                    top:0,
                    left:(itemWidth) * i+20*i,
                });
                //將行高push到數(shù)組
                arr.push(height);
            } else {
                // 其他行
                // 3 找到數(shù)組中最小高度  和 它的索引
                var minHeight = arr[0];
                var index = 0;
                for (var j = 0; j < arr.length; j++) {
                    if (minHeight > arr[j]) {
                        minHeight = arr[j];
                        index = j;
                    }
                }
                // 4 設(shè)置下一行的第一個盒子位置
                // top值就是最小列的高度
                $(this).css({
                    top:arr[index]+30,//設(shè)置30的距離
                    left:$(".box .item").eq(index).css("left")
                });

                // 5 修改最小列的高度
                // 最小列的高度 = 當前自己的高度 + 拼接過來的高度
                arr[index] = arr[index] + height+30;//設(shè)置30的距離
            }
        });
    }
    //clientWidth 處理兼容性
    function getClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // 頁面尺寸改變時實時觸發(fā)
    window.onresize = function() {
        //重新定義瀑布流
        waterFall();
    };
    //初始化
    window.onload = function(){
        //實現(xiàn)瀑布流
        waterFall();
    }
</script>
</html>

效果如下
 

怎么實現(xiàn)瀑布流布局

二、column 多行布局實現(xiàn)瀑布流

思路分析：

column 實現(xiàn)瀑布流主要依賴兩個屬性。
一個是 column-count 屬性，是分為多少列。
一個是 column-gap 屬性，是設(shè)置列與列之間的距離。

代碼實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>
</body>

效果如下：
 

怎么實現(xiàn)瀑布流布局

三、flex 彈性布局實現(xiàn)瀑布流

思路分析：

flex 實現(xiàn)瀑布流需要將最外層元素設(shè)置為 display: flex，即橫向排列。然后通過設(shè)置 flex-flow:column wrap 使其換行。設(shè)置 height: 100vh 填充屏幕的高度，來容納子元素。每一列的寬度可用 calc 函數(shù)來設(shè)置，即 width: calc(100%/3 - 20px)。分成等寬的 3 列減掉左右兩遍的 margin 距離。

代碼實現(xiàn)：

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>
</body>


 

以上就是怎么實現(xiàn)瀑布流布局，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手