Efek aliran air terjun yang disebut sama seperti efek homepage peta cahaya. Beberapa kolom dengan konten yang sama diatur secara ketat, mencoba meminimalkan celah antara kolom (mis., Tata letak cairan). Saat bilah gulir halaman gulir ke bawah, data baru akan ditambahkan ke akhir halaman saat ini sampai semua data dimuat (gulir yang dipicu Ajax Page Turn).
Aliran air terjun memicu pagination
Izinkan saya berbicara tentang ide di sini, meskipun contoh -contoh berikut tidak dapat digunakan semuanya:
1. Saat memasuki layar, tentukan apakah kontennya kosong. Jika tidak kosong, mulailah menginisialisasi data.
2. Saat menarik ke bawah ke layar, menilai bagian bawah data dan ketinggian layar + ketinggian gulir. Jika bagian bawah lebih kecil dari jumlah di atas dua, peroleh kembali antarmuka, yaitu, muat data.
3. Ketika data melebihi sejumlah halaman, berhenti memuat atau menampilkannya dalam bentuk paging, dan klik untuk menampilkan konten.
var intf_url = "http://vevb.com/intf"; var pathurl = "http://vevb.com/";var page = 1; var isLoadRB = false; var ul_select = $ ("#fanslist"); var btn_more = $ ("#loading"); if (ul_select.length <1) return; var is_more = true; // cross-domain interface function function loadjs (src, callback) {var js = document.createelement ('skrip'); js.src = src; js.onreadystatechange = js.onload = function () {if (! js.readystate || js.readystate == 'dimuat' || js.readystate == 'complete') {if (callback) {callback () || callback}; }}; js.charset = "utf-8"; document.geteLementsbyTagname ('head') [0] .AppendChild (js);} // Fungsi fungsi panggilan balik (data) {if (data.pagecount == data.pageno) {is_more = false; $ ("#loading"). html ("dimuat");}} // menyelesaikan fungsi antarmuka queryIntf () {var url = halaman == 1? intf_url+". json": intf_url "_ page"+halaman+". json"; loadjs (url, callback);} page "page+". json "; loadjs (url, callback);} page" page+". json"; loadjs (url, callback);} function (callback) (callback {} page+". Loaded*/function needtoloadrb () {var btn_top = btn_more.offset (). Top; var window_height = $ (window) .height (); var scroll_top = $ (window) .scrolltop (); return btn_top <scroll_top+window_height? true: false;} $ (window) .scroll (function () {var _needload = needtoloadrb (); if (_needload && isLoadrb == false && is_more) {isLoadRB = true; queryf () () () () {queryf (); {queryf (); }Di atas adalah kode ide yang relatif sederhana yang terus memuat dengan konten drop-down.
Format JSON mirip dengan (jika itu antarmuka dinamis, Anda dapat menggunakan fungsi callback, maka Anda tidak perlu menambahkan fill () di sini):
fill({"fans":[{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM" ,"youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","we bsite":"VeVB.COM","youzhi":"2.5","time":"3 minutes lalu "}, {" nama panggilan ":" cai baojian "," situs web ":" vevb.com "," yoezhi ":" 2.5 "," Time ":" 3 menit yang lalu "}, {" nama panggilan ":" non -nol ":" "not": "NOMBIA", "VEVB.COM", "Youzhi:": "Youzhi:": "youzhi:": "youzhi:" {vevb.com "," youzhi ":" ckname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes lalu "}]," pagecount ": 2," pageno ": 1," halaman ": 10," totalsize ": 20});Ternyata callback antarmuka statis juga dapat digunakan. Melalui pemrosesan statis, tekanan server sangat diringankan dan pembuatan konten dipercepat, dan merupakan metode pemrosesan yang diperlukan untuk situs web skala besar.
Metode AJAX JQuery mengimplementasikan Pagination yang memicu aliran air terjun
1. Dapatkan konten halaman berikutnya melalui Ajax
Kami membutuhkan navigasi di halaman web dengan struktur HTML berikut, Next_link adalah URL dari halaman berikutnya.
<Div id = "page_nav"> <a href = "next_link"> halaman berikutnya </a> </div>
CSS yang sesuai
#page_nav {clear: keduanya; Teks-Align: tengah; }Kode berikut adalah untuk mendapatkan konten halaman berikutnya melalui AJAX dan menambahkannya ke akhir konten saat ini.
nexThref = $ ("#next_page a"). attr ("href"); // bind event gulir $ (window) .bind ("scroll", function () {// Tentukan apakah scrollbar jendela mendekati bagian bawah halaman (). Tautan halaman kosong jika (nexThref! = Tidak terdefinisi) {// Ajax Page Turn $ .Ajax ({url: $ ("#page_nav a"). attr ("href"), ketik: "post", success: function (data) {hasil = data) .find ("#thumbs. a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexThref); $ ("#thumbs "). append (hasil);}});} else {$ ("#page_nav "). Remove ();}}});2. Tata letak cairan konten tambahan
Sepatu anak -anak yang akrab dengan jQuery harus memahami bahwa JS tidak berfungsi untuk elemen yang dimasukkan ke dalam halaman melalui Ajax, tetapi tidak perlu melakukan ini, seperti menggunakan Live (), karena Masonry telah membuat pemrosesan yang sama secara internal dan bekerja secara default, sehingga Anda hanya perlu memanggil metode pasangan bata () dalam fungsi panggilan balik setelah AJAX berhasil dieksekusi.
$ newelems = $ result; $ newelems.imageLoaded (function () {$ container.masonry ('ditambahkan', $ newelems, true);});3. Ubah Proses Putar Halaman AJAX
Sudah ada tata letak aliran air terjun yang lengkap dalam proses di atas, tetapi tidak ada prompt selama proses belok halaman, dan memasukkan beberapa gambar secara langsung dapat memengaruhi pengalaman pengguna, sehingga beberapa modifikasi perlu dilakukan pada proses belokan halaman. Kode lengkap diberikan di bawah ini.
Di sini Anda perlu menambahkan elemen sebagai berikut untuk meminta konten baru sedang dimuat atau bahwa prompt telah mencapai halaman terakhir.
<Div id = "page_loading"> <span> Loading daya ... </span> </div>
CSS yang sesuai
Salinan kode adalah sebagai berikut:
#page_loading {display: none; Latar Belakang: #111111; Opacity: 0.7; Tinggi: 60px; Lebar: 220px; padding: 10px; Posisi: Absolute; Bawah: -50px; Kiri: 330px; }
Di bawah ini adalah kode putaran halaman AJAX lengkap
nexThref = $ ("#next_page a"). attr ("href"); // bind event gulir $ (window) .bind ("scroll", function () {// Tentukan apakah scrollbar jendela mendekati bagian bawah halaman (). Tautan halaman kosong jika (nexThref! = Tidak ditentukan) {// Tampilkan modul pemuatan $ ("#page_loading"). Tampilkan ("Lambat"); .imgbox "); nexThref = $ (data) .find ("#page_nav a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexThref); $ ("#jempol "). Hasil (result); // setel konten baru ke transparent $: 0 $ newelems.imageLoaded (function () {$ container.masonry ('ditambahkan', $ newelems, true); // tunjukkan konten baru dalam proses $ newelems.animate ({opacity: 1}); // Sembunyikan Module $ ("#Page_Loading"); hide ("slow");}. " Halaman! "); $ ("#page_loading "). Tampilkan (" cepat "); setTimeout (" $ ('#page_loading'). Sembunyikan () ", 1000); setTimeout (" $ ('#page_Loading'). Remove () ", 1100);}}});