cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan

Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan

青灯夜游
青灯夜游ke hadapan
2021-09-26 10:58:144923semak imbas

Bagaimana untuk melaksanakan aliran air terjun dengan CSS? Artikel berikut akan memperkenalkan kepada anda dua cara untuk menggunakan CSS untuk melaksanakan aliran air terjun Saya harap ia akan membantu anda!

Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan

Aliran air terjun, juga dikenali sebagai susun atur aliran air terjun, ialah kaedah susun atur halaman tapak web yang popular. Ia sering digunakan apabila memaparkan berbilang imej pada telefon mudah alih. Iaitu, berbilang baris elemen yang sama lebar disusun, dan unsur-unsur berikutnya ditambah kepada mereka dalam urutan, dengan lebar yang sama dan ketinggian yang tidak sama Mereka diskalakan mengikut bahagian asal gambar sehingga lebar mencapai keperluan kami, dan kemudian diletakkan pada kedudukan yang ditetapkan mengikut peraturan.

Jadi apakah kaedah pelaksanaan susun atur aliran air terjun?

column Susun atur berbilang baris untuk melaksanakan aliran air terjun

column Melaksanakan aliran air terjun bergantung terutamanya pada dua atribut. Atribut

column-count mengawal bilangan lajur skrin dibahagikan kepada. Atribut

column-gap mengawal jarak antara lajur. 

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

Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan

flex Susun atur fleksibel untuk merealisasikan aliran air terjun

flex untuk direalisasikan aliran air terjun Anda perlu menetapkan elemen paling luar kepada display: flex, gunakan susun atur fleksibel

flex-flow:column wrap untuk menyusunnya secara menegak dan membalutnya dalam baris baharu

tetapkan ketinggian height: 100vh kepada mengisi skrin, atau anda boleh menetapkannya kepada Ketinggian dalam unit px untuk menampung elemen kanak-kanak.

Lebar setiap lajur boleh ditetapkan dengan fungsi calc, iaitu width: calc(100%/3 - 20px). Bahagikan kepada lajur 3 sama lebar tolak jarak margin dua kali di kiri dan kanan. 

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

Kesan paparan adalah seperti berikut

Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan

Kod kes

Pelaksanaan aliran air terjun kod: https ://gitee.com/yunxii/css-demo/tree/master/waterfall

Alamat asal: https://juejin.cn/post/7011333433318178846

Pengarang: tangxd3

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css count display margin column flex https gitee
Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ketahui lebih lanjut tentang :is() dan :where() dalam CSS untuk menjadikan kod gaya anda lebih ringkas!Artikel seterusnya：Ketahui lebih lanjut tentang :is() dan :where() dalam CSS untuk menjadikan kod gaya anda lebih ringkas!

Artikel berkaitan

Lihat lagi