Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan-tutorial css-php.cn

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

青灯夜游

Lepaskan： 2022-11-15 16:18:03

ke hadapan

4895 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!