搜尋

首頁 >web前端 >css教學 >CSS要怎麼實現瀑布流？兩種方式介紹

CSS要怎麼實現瀑布流？兩種方式介紹

青灯夜游
青灯夜游轉載
2021-09-26 10:58:144955瀏覽

CSS怎麼實現瀑布流？以下這篇文章跟大家介紹一下使用CSS實現瀑布流的兩種方式，希望對大家有幫助！

CSS要怎麼實現瀑布流？兩種方式介紹

瀑布流又稱為瀑布流式佈局，是比較流行的一種網站頁面佈局方式。在手機端進行多圖片展示時會常用到。即多行等寬元素排列，後面的元素依次添加到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。

那麼瀑布串流佈局有哪些實作方式呢？

column 多行佈局實作瀑布流

#column 實作瀑布流主要依賴兩個屬性。

column-count 屬性，是控制畫面分成多少列。

column-gap 屬性，是控制列與列之間的距離。 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流布局-column</title>
  <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="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
  </div>
</body>
</html>

CSS要怎麼實現瀑布流？兩種方式介紹

flex 彈性佈局實作瀑布流

##flex 實作瀑布流需要將最外層元素設定為display: flex，使用彈性佈局

flex-flow:column wrap 使其縱向排列並且換行換行

設定

height: 100vh 填滿螢幕的高度，也可以設定為單位為px 的高度，來容納子元素。

每一列的寬度可用

calc 函數來設置，即 width: calc(100%/3 - 20px)。分成等寬的 3 列減掉左右兩次的 margin 距離。 

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
    <div class="item">
      <img  src="./imgs/2.jpg" alt="2" />
    </div>
    <div class="item">
      <img  src="./imgs/3.jpg" alt="3" />
    </div>
    <div class="item">
      <img  src="./imgs/1.jpg" alt="1" />
    </div>
  </div>
</body>
</html>
展示效果如下

CSS要怎麼實現瀑布流？兩種方式介紹

#案例程式碼

瀑布流實作程式碼：https:/ /gitee.com/yunxii/css-demo/tree/master/waterfall

#原文網址：https://juejin.cn/post/7011333433318178846

作者：tangxd3

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是CSS要怎麼實現瀑布流？兩種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css count display margin column flex https gitee
陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：深入學習CSS中的 :is() 和 :where()，讓樣式程式碼更簡潔！下一篇：深入學習CSS中的 :is() 和 :where()，讓樣式程式碼更簡潔！

相關文章

看更多