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

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

阿新 • • 發佈：2020-12-29

前言

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

一、JS 實現瀑布流

思路分析

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

程式碼實現

<!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="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </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); //設定到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到陣列
    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>

效果如下

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

二、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="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
</div>
</body>

效果如下：

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

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

思路分析：

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

程式碼實現：

<!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="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="JavaScript實現瀑布流佈局的3種方式" />
 </div>
</div>
</body>

效果如下：

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

四、3種方式對比

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

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

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

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

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

實現瀑布流佈局

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

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

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

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

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

Redis 實現限流的三種方式

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

3種方式實現Redis限流

Redis限流的實現方式有3種，分別是：1、基於Redis的setnx的操作，給指定的key設定了過期實踐；2、基於Redis的資料結構zset，將請求打造成一個zset陣列；3、基於Redis的令牌桶演算法，輸出速率大於輸入速率，就要限流

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

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

瀑布流佈局 不到30行程式碼實現（JavaScript + absolute）支援懶載入

@ 目錄 前言 一、使用css實現瀑布流佈局 1.flex 佈局 2.column-count 多欄佈局 3.grid 網格佈局

IOS 圖片存放3種方式的實現

Image.xcassets 建立 .xcassets，以 Image Set 形式管理圖片，新增圖片後會生成對應的 content.json 檔案

vue實現簡單瀑布流佈局

vue簡單實現瀑布流佈局的一種方式（vue瀑布流元件），供大家參考，具體內容如下

js瀑布流佈局的實現

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

兩行css程式碼實現瀑布流：html,css最簡單的瀑布流實現方式

　　兩行css如下： .waterfall-container { /*分幾列*/ column-count: 2; /*列間距，可有可無，預設30px*/

純css實現瀑布流（multi-column多列及flex佈局）

瀑布流的佈局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這裡記錄下，特別的，感覺flex佈局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了

vue-router路由懶載入及實現的3種方式

什麼是路由懶載入？ 也叫延遲載入，即在需要的時候進行載入，隨用隨載。 官方解釋：

如何用JS實現網頁瀑布流佈局

前言： 瀑布流 又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。即多行等寬元素排列，後面的元素依次新增到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。

兩欄佈局三種方式實現

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

Java細粒度鎖實現的3種方式

Java細粒度鎖實現的3種方式 最近在工作上碰見了一些高併發的場景需要加鎖來保證業務邏輯的正確性，並且要求加鎖後效能不能受到太大的影響。初步的想法是通過資料的時間戳，id等關鍵字來加鎖，從而保證不同型別資料處

手摸手，帶你實現移動端H5瀑布流佈局

移動端瀑布流佈局是一種比較流行的網頁佈局方式，視覺上來看就是一種像瀑布一樣垂直落下的排版。每張圖片並不是顯示的正正方方的，而是有的長有的短，呈現出一種不規則的形狀。但是它們的寬度通常都是相同的

IOS 圖片存放3種方式

Image.xcassets 建立 .xcassets，以 Image Set 形式管理圖片，新增圖片後會生成對應的 content.json 檔案