Rumah > Artikel > hujung hadapan web > Memahami dan Melaksanakan Tatal Infinite dengan JavaScript
Memahami dan Melaksanakan Tatal Infinite dengan JavaScript
- 王林asal
- 2024-07-23 12:35:31620semak imbas
Apakah Tatal Infinite?
Anda mungkin telah melihat tapak seperti kedai dalam talian di mana, apabila anda menatal ke bawah halaman, produk muncul secara berterusan. Contoh lain ialah endless.horse, ia mungkin kelihatan mudah tetapi ia adalah contoh terbaik untuk menunjukkan kefungsian "Infinite Scrolls". Apabila anda mengakses tapak web, anda melihat seekor kuda, tetapi apabila anda menatal ke bawah halaman, anda menyedari bahawa kaki kuda itu terus membesar selama-lamanya, dan anda tidak pernah sampai ke kaki kuda itu.
Melaksanakan Tatal Infinite
Fungsi ini digunakan secara meluas dalam pembangunan moden. Kita boleh melihat tatal tak terhingga dalam tindakan pada rangkaian sosial utama, seperti Twitter, Facebook dan terutamanya Instagram, di mana kandungan nampaknya tidak pernah berakhir semasa kita menatal ke bawah halaman.
Dalam artikel ini, saya akan menunjukkan pelaksanaan asas fungsi ini. Walau bagaimanapun, pendekatan ini tidak menangani isu seperti isu dengan pertanyaan panjang, pelaksanaan caching dan penyelesaian lain yang diperlukan untuk aplikasi pengeluaran. Namun, ini adalah titik permulaan untuk memahami cara kami boleh melaksanakan ciri ini.
Langkah 1: Tentukan tempat untuk menambah fungsi tatal tak terhingga
Mula-mula, tentukan tempat anda akan menambah fungsi tatal tak terhingga. Adakah ia akan menjadi senarai siaran atau imej? Anda juga perlu memutuskan dari mana data akan datang. Untuk contoh ini, kami akan menggunakan imej daripada API asas, Random Fox API.
Langkah 2: Buat fail HTML anda
Buat fail HTML dan masukkan bekas untuk imej musang rawak anda.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fox Images</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="header">Fox Images</h1> <div class="container"></div> <script src="script.js"></script> </body> </html>
Langkah 3: Buat fail CSS anda
Untuk contoh ini, kami akan memastikan lembaran gaya sangat mudah.
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.header {
font-size: 32px;
color: black;
text-align: center;
font-family: Verdana, sans-serif;
}
img {
width: 400px;
height: 400px;
margin: 4px;
object-fit: cover;
}
Langkah 4: Buat fail JavaScript anda
Pilih bekas dan dapatkan URL API Random Fox. Jangan lupa untuk memautkan fail JavaScript dan CSS anda dalam HTML.
const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";
function getRandomNumber() {
return Math.floor(Math.random() * 100);
}
function loadImages(numImages = 6) {
let i = 0;
while (i < numImages) {
const img = document.createElement('img');
img.src = `${URL}${getRandomNumber()}.jpg`;
container.appendChild(img);
i++;
}
}
loadImages();
Langkah 5: Tambah Acara Tatal
Untuk melaksanakan fungsi tatal tak terhingga, tambahkan pendengar acara ini:
window.addEventListener('scroll', () => {
if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
loadImages();
}
});
Jika jumlah scrollY dan innerHeight lebih besar daripada atau sama dengan scrollHeight, ini bermakna kita telah sampai ke penghujung dokumen dan oleh itu kita perlu memuatkan lebih banyak imej.
Kesimpulan
Halaman anda kini seharusnya berfungsi dengan teknik tatal tak terhingga. Berikut ialah cabaran untuk anda: cuba buat semula projek ini menggunakan API lain pilihan anda, juga laksanakan beberapa gaya yang lebih rumit untuk memaparkan item anda. Semoga berjaya!
Atas ialah kandungan terperinci Memahami dan Melaksanakan Tatal Infinite dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!