2. 程式人生 > 程式設計 >實現瀑布流佈局的三種方式

實現瀑布流佈局的三種方式

阿新 • • 發佈：2021-12-21

前言

今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

一、 實現瀑布流

思路分析

  • 瀑布流佈局的特點是等寬不等高。
  • 為了讓最後一行的差距最小，從第二行開始，需要將圖片放在第一行最矮的圖片下面，以此類推。
  • 父元素設定為相對定位，圖片所在元素設定為絕對定位。然後通過設定 top 值和 left 值定位每個元素。

程式碼實現

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100%;
            http://www.cppcns.com
 
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="bann
 
er.jpg" alt="實現瀑布流佈局的三種方式" />
    </div>
</div>
</body>
<script src=".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); //設定到item的寬度
        var arr = [];
        $(".box .item").each(function(i){
            var height = $(this).find("img").height();
            if (i < columns) {
                // 2 第一行按序佈局
                $(this).({

 
                    top:0,left:(itemWidth) * i+20*i,});
                //將行高push到陣列
                arr.push(height);
            } else {
                // 其他行
                // 3 找到陣列中最小高度  和 它的索引
                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 設定下一行的第一個盒子位置
                // top值就是最小列的高度
                $(this).css({
                    top:arr[index]+30,//設定30的距離
                    left:$(".box .item").eq(index).css("left")
                });

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

效果如下

實現瀑布流佈局的三種方式

二、column 多行佈局實現瀑布流

思路分析：

  • column 實現瀑布流主要依賴兩個屬性。
  • 一個是 column-count 屬性，是分為多少列。
  • 一個是 column-gap 屬性，是設定列與列之間的距離。

程式碼實現：

<!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>

效果如下：

實現瀑布流佈局的三種方式

三、flex 彈性佈局實現瀑布流

思路分析：

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

程式碼實現：

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {http://www.cppcns.com
          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="實現瀑布流佈局的三種kADQeh方式" />
    </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>

效果如下：

實現瀑布流佈局的三種方式

四、3種方式對比

如果只是簡單的頁面展示，可以使用 column 多欄佈局和 flex 彈性佈局。如果需要動態新增資料，或者動態設定列數，就需要使用到 JS + jQuery。

以上所述是小編給大家介紹的實現瀑布流佈局的三種方式，希望對大家有所幫助。在此也非常感謝大家對我們的支援！

相關推薦

Redis 實現限流的三種方式

面對越來越多的高併發場景，限流顯示的尤為重要。 當然，限流有許多種實現的方式，Redis具有很強大的功能，我用Redis實踐了三種的實現方式，可以較為簡單的實現其方式。Redis不僅僅是可以做限流，還可以做資料統計，

實現瀑布流佈局的三種方式

前言 今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

JavaScript實現瀑布流佈局的3種方式

前言 今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

兩欄佈局三種方式實現

1. 實際上類似 三欄佈局，仍然是三種實現方式：浮動、定位、flex 【1】float + margin-left / BFC（overflow: hidden;）

Golang實現超時退出的三種方式

前段時間發現線上有個服務介面，總是間歇性告警，有時候一天兩三次，有時候一天都沒有。

Android實現輪詢的三種方式

本文例項為大家分享了Android實現輪詢的方式，供大家參考，具體內容如下 1.通過rxjava實現(程式碼中使用了Lambda表示式)

java實現HTTP請求的三種方式

原文地址https://www.cnblogs.com/hhhshct/p/8523697.html 　　目前JAVA實現HTTP請求的方法用的最多的有兩種：一種是通過HTTPClient這種第三方的開源框架去實現。HTTPClient對HTTP的封裝性比較不錯，通過它基本上能

python 使用elasticsearch 實現翻頁的三種方式

使用ES做搜尋引擎拉取資料的時候，如果資料量太大，通過傳統的from + size的方式並不能獲取所有的資料（預設最大記錄數10000），因為隨著頁數的增加，會消耗大量的記憶體，導致ES叢集不穩定。因此延伸出了scroll，

在嵌入式裝置中實現webrtc的第三種方式①

　　最近兩年，我對於網路知識，包括底層協議學習比較多，webrtc這種幾乎是使用到了所有層面網路協議的技術也逐漸進入我的視野。

實現瀑布流佈局

瀑布流佈局 原生js實現瀑布流 實現思路： 父元素設定相對定位，子元素設定絕對定位

js實現瀑布流佈局（無限載入）

本文例項為大家分享了js實現瀑布流佈局的具體程式碼，供大家參考，具體內容如下

flex實現瀑布流佈局並實現從左到右排序（order）

flex結合order實現從左到右的瀑布流 這種方式可以做到先從左到右，再從上到下顯示

Java專案開發中實現分頁的三種方式一篇包會

前言   Java專案開發中經常要用到分頁功能，現在普遍使用SpringBoot進行快速開發，而資料層主要整合SpringDataJPA和MyBatis兩種框架，這兩種框架都提供了相應的分頁工具，使用方式也很簡單，可本人在工作中除此

什麼是分散式鎖？實現分散式鎖的三種方式

在很多場景中，我們為了保證資料的最終一致性，需要很多的技術方案來支援，比如分散式事務、分散式鎖等。那具體什麼是分散式鎖，分散式鎖應用在哪些業務場景、如何來實現分散式鎖呢？

c++實現全排列的三種方式

遞迴方式 #include <cstdio> #include <iostream> #include <algorithm> #include <string>

淺析瀑布流佈局原理及實現方式

一、瀑布流 　　瀑布流佈局有一個專業的英文名稱Masonry Layouts。瀑布流佈局已經有好多年的歷史了，我最早知道這個名詞的時候大約是在2012年，當時Pinterest網站的佈局就是使用的這種流式佈局，簡言之像Pinterest網

nginx限流方案的實現(三種方式)

通過檢視nginx官方文件，小弟檢視到了三種nginx限流方式。 1、limit_conn_zone 2、limit_req_zone

三種方式實現函式語言程式設計

三種方式實現函式語言程式設計 摘要 在Java8引入函式語言程式設計之後，很多複雜的程式碼可以大大的簡化，甚至可以簡化成一句話。這裡就主要通過一個例子，分析使用Lambda表示式、靜態方法以及例項方法簡化程式碼

vue路由傳參的基本實現方式小結【三種方式】

本文例項講述了vue路由傳參的基本實現方式。分享給大家供大家參考，具體如下：

vue元件傳值的實現方式小結【三種方式】

本文例項講述了vue元件傳值的實現方式。分享給大家供大家參考，具體如下：