Artikel ini menggunakan kode JS murni untuk menulis efek halaman web aliran air terjun, awalnya menerapkan tata letak aliran air terjun dasar, dan mensimulasikan data AJAX yang memuat fungsi gambar baru setelah menggulir ke bawah.
kekurangan:
1. Program ini tidak responsif dan tidak dapat menyesuaikan lebar halaman secara real time;
2. Ketika gambar data simulasi AJAX ditambahkan ke program, semua gambar di seluruh halaman diposisikan ulang sekali.
3. Program ini menunggu semua gambar dimuat sebelum membaca ukuran gambar. Bahkan, ini jelas tidak mungkin.
4. Dalam proyek aktual, program latar belakang harus memberikan nilai ukuran gambar dan secara langsung menggunakan atribut lebar gambar dalam kode JS.
Ide untuk program ini:
Struktur HTML:
<body> <v id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> </div> </body>
1. Inisialisasi tata letak
1. Set #container ke posisi: relatif;
2. Set .Box ke float: kiri;
3. Posisikan semua gambar setelah halaman web dimuat;
3.1 Lebar gambar diperbaiki. Hitung jumlah gambar yang dapat ditampung oleh setiap baris halaman saat ini, dan dapatkan lebar #Container, dan kemudian atur halaman ke tengah;
3.2 Lingkarkan melalui semua gambar, tata letak float default dari gambar num pertama adalah sebagai baris pertama, dan array boxheigharr = [];
3.3 Setelah tata letak baris pertama selesai, atur gambar berikutnya dan perbarui BoxHeigharr []:
3.3.1 Tempatkan gambar berikutnya di bawah gambar terpendek di baris pertama (posisi: absolute), yaitu kolom dengan ketinggian terkecil di boxheigharr [], dan catat nilai indeks dari angka -angka berikut: minindex;
3.3.2 Perbarui nilai terkecil di BoxHeighArr [] (BoxHeigharR [MinIndex]+Tinggi gambar saat ini);
3.4 Ulangi siklus 3.3 langkah sampai semua gambar diatur
2. Pemantauan waktu nyata dari tinggi pengguliran, apakah data baru akan dimuat
1. Setelah inisialisasi selesai, dapatkan ketinggian gambar terakhir dari atas: lastcontentheight
2. Gunakan window.onscroll = function () {...}
Pemantauan real-time pada ketinggian gulir halaman saat ini adalah: scrolltop
Pemantauan waktu nyata dari Tinggi Jendela Halaman saat ini adalah: PageHeight
3. Ketika halaman memantau: LastContentHeight <Scrolltop + PageHeight, gunakan AJAX untuk mendapatkan data JSON dari gambar yang baru ditambahkan.
3. Tambahkan konten baru di bagian bawah halaman
1. Gunakan loop untuk membuat wadah gambar baru terlebih dahulu, tambahkan ke bawah, dan kemudian tulis data gambar yang sesuai seperti jalur dalam data JSON ke wadah untuk melengkapi penambahan gambar.
2. Setelah semua gambar baru ditambahkan, eksekusi ulang operasi inisialisasi Langkah 1 untuk semua gambar dan tata letak seluruh halaman.
Folder Proyek:
Index.html: Bagian pra-tempat dari data gambar
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/app.js"></script> <title>JavaScript Waterfall Flow</title> </head> <body> <div id="container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <v> <img src = "img/3.jpg"/</div> </div> <Img> <img/iMg = "jpg"/</div> </div> </IMG> <IMG> <IMG/IMG = " </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/</div> </div> <mg> <mg> <pon "6jpg"/</Div> </div> <mg> <mg> <mg> <"IMG =" IMG = "IMG =" IMG = "IMG =" IMG = "IMG/IMG/5.jpg"/ </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <v> <img src = "img/8.jpg"/</div> </div> <pon> <pon. </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <piv> </Img Src = "img/3.jpg"/</Div> </Div> </Img Src = "IMG/3.JPG"//</Div> div> </Div> </IMG SRC = "IMG/3.JPG"//</DIV> </Div> </div> </IMG SRC = " </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <piv> </img src = "img/6.jpg"/</Div> </Div> </div> Img SRC = "IMG/6.JPG"//</DIV> </DIV> </Div> "IMG SRC =" IMG/6.JPG "//</DIV> </DIV> </DIV>" IMG " </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> </Img src = "iMg/6.jpg"/</Div> </Div> </div> IMG SRC = "IMG/6.JPG"//> </Div> </Div> </Div> "IMG SRC =" 6JPG "//> </Div> </Div> </div>" IMG SRC = "6JPG"//> </DIV> </DIV> </IMG SRC = " </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <v> <img src = "img/8.jpg"/> </div> </div> <img src = "img/8.jpg"/</div> </div </div </div </div </div </div </div </div = "IMG/8.JPG"/</div> </div </div </div </IMG = "IMG/8.JPG"/> </Div> </div </IMG = "IMG/8.JPG"/> src = "img/9.jpg"/> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <v> <img src = "img =" IMG = "IMG =" src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <v> <img src = "iMg/4.j" </div> </div> <v> <img src = "img/4.j" src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <v> <iMg src = "iMg/iMg/</Div> </Div> <v> <img src =" iMg/7.j " src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <v> <iMg src = "img"/> </div> </div> <v> <img src = "img/iMg/</div" </div "</div src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <v div> <iMg src = "img/10.jpg"/</div> </div> </div> </body> hpg "/</div> </div> </Div> </div> hy/10.jpg"/</div> </Div> </Div> </Div> body> hpg "/</Div> </div> </Div> </div> body> hpg"/</Div> </Div> </Div> </div> body> hpg "/</div> </div> </Div> </div> hy/hpg"/</div> </div> </div> </div>
style.css:
*{margin: 0; padding: 0;}#container {position: relative;}. box {padding: 5px; float: left;}. box_img {padding: 5px; Perbatasan: 1px solid #ccc; Kotak-Shadow: 0 0 5px #CCC; Border-Radius: 5px;}. BOX_IMG IMG {Lebar: 150px; Tinggi: otomatis;}app.js:
window.onload = function () {imGlocation ("container", "box"); // data simulasi ajax var imgdata = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jp G "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "}, {" src ":" 6.jpg "}, {" src "8.jc": "6.jpg"}, {"src". window.onscroll = function () {if (checkflag ()) {// menilai apakah data baru akan dimuat di bagian bawah var cparent = document.getElementById ("container"); // Muat data AJAX ke halaman untuk (var i = 0; i <imgdata.data.length; i ++) {var ccontent = document.createElement ("div"); ccontent.classname = "box"; cparent.AppendChild (CCONTENT); var boximg = document.createElement ("div"); boximg.classname = "box_img"; CContent.AppendChild (BoxIMG); var img = document.createElement ("img"); img.src = "img/"+imgdata.data [i] .src; boximg.AppendChild (IMG); } // Reposisi semua data gambar setelah imlocation ("wadah", "kotak"); }}}; function checkFlag () {var cparent = document.geteLementById ("container"); var ccontent = getChildeLement (cparent, "box"); // Dapatkan ketinggian gambar terakhir dari atas, tinggi gulir, ketinggian jendela var lastcontentheight = ccontent [ccontent.length-1] .offsettop; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pageHeight = document.documentelement.clientHeight || document.body.clientHeight; console.log (lastcontentheight+":"+scrolltop+":"+pageHeight); if (lastcontentheight <scrolltop + pageHeight) {return true; }} fungsi imGlocation (induk, konten) {// ambil semua konten di bawah induk dari var cparent = document.getElementById (induk); var ccontent = getChildeLement (cparent, konten); // correate jumlah gambar per baris sesuai dengan lebar jendela browser saat ini dan perbaiki, tengah var imgwidth = ccontent [0] .offsetWidth; // offsetWidth = lebar + padding + border var num = math.floor (document.documentelement.clientwidth /imgwidth); cparent.style.csStext = "lebar:"+imgwidth*num+"px; margin: 0 auto"; // peringatan ("jeda"); // Tetapkan array untuk meng -host informasi gambar dari baris pertama var boxheigharr = []; untuk (var i = 0; i <ccontent.length; i ++) {if (i <num) {// Rekam ketinggian gambar di baris pertama BoxHeigharr [i] = ccontent [i] .offsetHeight; // Ketika data AJAX dimuat, program tersebut memposisikan ulang semua gambar, sehingga gambar di baris pertama harus dibersihkan posisi: ccontent absolute [i] .style.position = "statis"; } else {var minheight = math.min.Apply (null, boxheightarr); var minindex = getMinHeightLocation (Boxheightarr, MinHeight); // Letakkan gambar di bawah nilai indeks terkecil dari CContent baris pertama [i] .style.position = "absolute"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; // Setelah gambar ditempatkan, perbarui "ketinggian minimum dari baris pertama informasi gambar", // kemudian gunakan loop untuk mengulangi tindakan ini sampai boxheigharr [minindex] = boxheigharr [minindex] + ccontent [i] .offsetHeight; }};} // Dapatkan nilai indeks dengan ketinggian terkecil dari baris pertama gambar getminheightlocation (boxheigharr, minheight) {for (var i di boxheigharr) {if (boxheigharr [i] == minheight) {return i; }}} // Dapatkan semua BoxFunction getChildElement (Parent, Content) {ContentArr = Parent.GetElementsByClassName (Content); mengembalikan contentarr;}Gambar reproduksi:
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.