Memahami dan Melaksanakan Tatal Infinite dengan JavaScript-tutorial js-php.cn

Memahami dan Melaksanakan Tatal Infinite dengan JavaScript

王林

Lepaskan： 2024-07-23 12:35:31

asal

692 orang telah melayarinya

Entendendo e Implementando o Scroll Infinito com JavaScript

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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();

Salin selepas log masuk

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();
  }
});

Salin selepas log masuk

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!