Karena tidak ada server, saya menggunakan string JSON sebagai sumber pemuatan data gambar saat menarik ke bawah
html:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/waterfall.js"> </script> <style type = "text/css"> *{padang; 0; 0; } .pin {padding: 15px 0 0 15px; float: kiri; } .box {padding: 10px; Perbatasan: 1px solid #ccc; Kotak-Shadow: 0 0 6px #CCC; Border-Radius: 5px; } .box img {width: 162px; Tinggi: otomatis; } </tyle> </head> <body> <Div id = "Main"> <div> <div> <img src = "./ gambar/1.jpg"/> </div> </div> <ver> <img src = ". <img src = "./ gambar/4.jpg"/> </div> </div> <div> <img src = "./ gambar/4.jpg"/> </div> </div> <div> <img src = ". <Div> <img src = "./ gambar/7.jpg"/> </div> </div> <div> <img src = "./ gambar/8.jpg"/> </div> </div> <v> <img src = ". </div> <div> <img src = "./ gambar/10.jpg"/> </div> </div> <div> <img src = "./ gambar/10.jpg"/> </div> </div> <piv> <img src = ". </div> </div> <div> <img src = "./ gambar/10.jpg"/> </div> </div> <v div> <img src = "./ gambar/11.jpg"/> </div> </div> <Div> <img src = ". src = "./ gambar/12.jpg"/> </div> </div> <ver> <img src = "./ gambar/13.jpg"/> </div> </div> <div> <img src = ". <Div> <img src = "./ gambar/16.jpg"/> </div> </div> <ver> <img src = "./ gambar/16.jpg"/> </div> </div> <v> <img src = ". </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/17.jpg"/> </div> </div> <div> <img src="./images/18.jpg"/> </div> </div> <div> <img src = "./ gambar/18.jpg"/> </div> </div> <ver> <img src = "./ gambar/19.jpg"/> </div> </div> <div> <img src = ". </div> </div> </body> </html>Jswallper.js:
window.onload = function () {waterfall ('main', 'pin'); var dataint = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]}; window.onscroll = function () {if (checkscrollside ()) {var oparent = document.geteLementById ('main'); // objek induk untuk (var i = 0; i <dataint.data.length; i ++) {var opini = document.createElement ('div'); // Tambahkan elemen node opini.classname = 'pin'; // Tambahkan Atribut Nama Kelas Oparent.AppendChild (Opini); // tambahkan simpul anak var obox = document.createelement ('div'); obox.classname = 'box'; OPP.AppendChild (OBOX); var oimg = document.createElement ('img'); oimg.src = './Images/'+dataint.data [i] .src; Obox.AppendChild (OIMG); } air terjun ('utama', 'pin'); }; }}/* ID elemen pin induk induk ID*/fungsi air terjun (induk, pin) {var oparent = document.geteLementById (induk); // objek induk var apin = getClassObj (oparent, pin); // dapatkan array box penyimpanan pin apin var ipinw = apin [0] .offsetwidth; // The Wide Var Pin Apin var ipinw = apin [0]. OFFSETWIDTH; num = math.floor (document.documentelement.clientwidth/ipinw); // Jumlah pin yang dapat ditampung di setiap baris [lebar jendela dibagi dengan satu blok kotak lebar] oparent.style.csstext = 'lebar:'+ipinw*num+'px; margin: 0 auto; '; // atur gaya berpusat induk: lebar tetap + margin horizontal otomatis var pinharr = []; // digunakan untuk menyimpan ketinggian semua kotak blok di setiap kolom. A untuk (var i = 0; i <apin.length; i ++) {// Transfer setiap elemen kotak blok dari array apin var pinh = apin [i] .offsetHeight; if (i <num) {pinharr [i] = pinh; // Pin kotak blok num di baris pertama ditambahkan ke array pinharr} else {var minh = math.min.apply (null, pinharr); // nilai minimum di array pinharr minh var minhindex = getminhindex (pinharr, minh); apin [i] .style.position = 'absolute'; // atur apin perpindahan absolut [i] .style.top = minh+'px'; apin [i] .style.left = apin [minhindex] .offsetleft+'px'; // Ketinggian elemen tinggi minimum array + Tambahkan apin [i] Kotak blok tinggi pinharr [minhindex] + = apin [i] .offsetheight; // Perbarui tinggi kolom setelah menambahkan kotak blok}}}/*mendapatkan array dari elemen anak yang sama melalui kelas kelas dari elemen induk dan fungsi anak -anak*/fungsi anak -anak. obj = parent.getElementsbyTagname ('*'); // Dapatkan semua himpunan bagian dari pin induk = []; // Buat array untuk mengumpulkan elemen anak untuk (var i = 0; i <obj.length; i ++) {// mentransfer elemen anak, menilai kategori, dan tekan ke dalam array if (obj [i]. }}; return pin;}/*****Dapatkan indeks indeks tinggi pin minimum*/fungsi getminhindex (arr, minh) {for (var i in arr) {if (arr [i] == minh) {return i; }}} function checkscrollside () {var oparent = document.geteLementById ('main'); var apin = getClassObj (oparent, 'pin'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offsetheight/2); // Buat ketinggian [memicu air terjun kotak blok (): kotak blok terakhir berasal dari bagian atas halaman Web + setengah dari tinggi (implementasi tanpa loading tanpa gulungan ke gulungan ke VAR) dari Web Page + Setengah dari tingginya (implementasi memulai pemuatan tanpa gulungan ke gulungan ke bagian akhir) VAR dari Web Halaman + Setengah dari Tingginya (implementasi memulai pemuatan tanpa gulungan tanpa gulungan ke gulungan ke The End dari The Web Page + Setengah dari Tingginya (implementasi memulai Loading Tanpa Gulungan TANP scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // paper tinggi kembali (lastpinh <scrolltop+documenth)? true: false; // return true setelah mencapai ketinggian yang ditentukan, memicu fungsi air terjun ()}Diagram demo:
Unduh kode sumber: //www.vevb.com/jiaoben/452663.html
Alamat demo: http://demo.vevb.com/js/2016/jswallper/