Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan aliran air terjun dalam CSS? Dua cara untuk memperkenalkan
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!
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>
flex
Susun atur fleksibel untuk merealisasikan aliran air terjun
flex
untuk direalisasikan aliran air terjun Anda perlu menetapkan elemen paling luar kepadadisplay: flex
, gunakan susun atur fleksibel
flex-flow:column wrap
untuk menyusunnya secara menegak dan membalutnya dalam baris baharutetapkan ketinggian
height: 100vh
kepada mengisi skrin, atau anda boleh menetapkannya kepada Ketinggian dalam unitpx
untuk menampung elemen kanak-kanak.Lebar setiap lajur boleh ditetapkan dengan fungsi
calc
, iaituwidth: calc(100%/3 - 20px)
. Bahagikan kepada lajur3
sama lebar tolak jarakmargin
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
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!