Menatal Infinite kini menjadi ciri umum dan terdapat beberapa kes di mana ia benar -benar berguna. Sebagai contoh terdapat beberapa laman web di mana kita tidak dapat membayangkan sistem penomboran yang baik, seperti Twitter atau Facebook. Satu lagi contoh di mana Scrolling Infinite boleh berguna adalah untuk enjin carian: anda akan mahu terus melihat pautan baru semasa anda tidak menemui yang anda inginkan, dan sistem penomboran dapat melambatkan anda dalam penyelidikan anda.
Jika anda perlu menggunakan Tatal Infinite untuk projek anda, berikut adalah enam demo yang boleh anda gunakan sebagai inspirasi untuk melaksanakannya.
Perhatikan bahawa, kecuali yang terakhir, semua demo ini ditulis dengan jQuery dan beberapa contoh menggunakan plugin jQuery. Walau bagaimanapun, contoh -contoh lain boleh disesuaikan dengan mudah untuk vanila JS tanpa sebarang masalah.
<span><span><span><div</span> class<span>="grid"</span>></span> </span> <span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span> </span> <span><span><span><p</span>></span>content<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> … <span><span><span></div</span>></span> </span> <span><!-- The next page which content will be loaded when scrolled --> </span><span><span><span><nav</span> id<span>="pagination"</span>></span> </span> <span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span> </span><span><span><span></nav</span>></span></span>
<span>$(document).ready(function() {
</span> <span>var grid = $('.grid');
</span>
grid<span>.masonry({
</span> <span>itemSelector: '.grid-item',
</span> <span>columnWidth: 200
</span> <span>});
</span>
grid<span>.infinitescroll({
</span> <span>// Pagination element that will be hidden
</span> <span>navSelector: '#pagination',
</span>
<span>// Next page link
</span> <span>nextSelector: '#pagination p a',
</span>
<span>// Selector of items to retrieve
</span> <span>itemSelector: '.grid-item',
</span>
<span>// Loading message
</span> <span>loadingText: 'Loading new items…'
</span> <span>},
</span>
<span>// Function called once the elements are retrieved
</span> <span>function(new_elts) {
</span> <span>var elts = $(new_elts).css('opacity', 0);
</span>
elts<span>.animate({opacity: 1});
</span> grid<span>.masonry('appended', elts);
</span> <span>});
</span><span>});</span>Lihat penaman Infinite Pena melalui catatan blog oleh SitePoint (@SitePoint) pada Codepen.
<span><span><span><div</span> class<span>="grid"</span>></span> </span> <span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span> </span> <span><span><span><p</span>></span>content<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> … <span><span><span></div</span>></span> </span> <span><!-- The next page which content will be loaded when scrolled --> </span><span><span><span><nav</span> id<span>="pagination"</span>></span> </span> <span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span> </span><span><span><span></nav</span>></span></span>
<span>$(document).ready(function() {
</span> <span>var grid = $('.grid');
</span>
grid<span>.masonry({
</span> <span>itemSelector: '.grid-item',
</span> <span>columnWidth: 200
</span> <span>});
</span>
grid<span>.infinitescroll({
</span> <span>// Pagination element that will be hidden
</span> <span>navSelector: '#pagination',
</span>
<span>// Next page link
</span> <span>nextSelector: '#pagination p a',
</span>
<span>// Selector of items to retrieve
</span> <span>itemSelector: '.grid-item',
</span>
<span>// Loading message
</span> <span>loadingText: 'Loading new items…'
</span> <span>},
</span>
<span>// Function called once the elements are retrieved
</span> <span>function(new_elts) {
</span> <span>var elts = $(new_elts).css('opacity', 0);
</span>
elts<span>.animate({opacity: 1});
</span> grid<span>.masonry('appended', elts);
</span> <span>});
</span><span>});</span>Demo ini dimuatkan dalam imej pada Tatal Infinite dan tidak pernah mencapai akhir. Ia menggunakan plugin tatal jQuery yang tidak berkesudahan yang boleh disesuaikan untuk mencetuskan bilangan piksel x dari bahagian bawah skrin. Demo klon imej yang sama dan memasukkannya ke hujung senarai dan sebagainya, tetapi skrip boleh disesuaikan untuk memuatkan imej dari sumber yang berbeza dengan mudah.
Lihat penaman tak tak terhingga melalui imej oleh SitePoint (@SitePoint) pada codepen.
<span><span><span><ul</span> id<span>="posts"</span>></span> </span> <span><span><span><li</span>></span> </span> <span><span><span><article</span>></span>content<span><span></article</span>></span> </span> <span><span><span></li</span>></span> </span> … <span><span><span></ul</span>></span> </span> <span><span><span><p</span> id<span>="loading"</span>></span> </span> <span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span> </span><span><span><span></p</span>></span></span>
<span>$(document).ready(function() {
</span> <span>var win = $(window);
</span>
<span>// Each time the user scrolls
</span> win<span>.scroll(function() {
</span> <span>// End of the document reached?
</span> <span>if ($(document).height() - win.height() == win.scrollTop()) {
</span> <span>$('#loading').show();
</span>
$<span>.ajax({
</span> <span>url: 'get-post.php',
</span> <span>dataType: 'html',
</span> <span>success: function(html) {
</span> <span>$('#posts').append(html);
</span> <span>$('#loading').hide();
</span> <span>}
</span> <span>});
</span> <span>}
</span> <span>});
</span><span>});</span>Demo ini menggunakan plugin yang sama seperti sebelumnya tetapi kami telah menggunakan tatal tak terhingga ke senarai dengan bar scroll menegaknya sendiri. Semasa anda menatal ke bawah, nombor hanya dilampirkan sebagai item senarai.
Lihat pen senarai nombor tak terhingga oleh SitePoint (@SitePoint) pada codepen.
<span><span><span><ul</span> id<span>="images"</span>></span> </span> <span><span><span><li</span>></span> </span> <span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span> </span> <span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span> </span> <span><span><span></a</span>></span> </span> <span><span><span></li</span>></span> </span> … <span><span><span></ul</span>></span></span>
<span>$(document).ready(function() {
</span> <span>$(window).endlessScroll({
</span> <span>inflowPixels: 300,
</span> <span>callback: function() {
</span> <span>var $img = $('#images li:nth-last-child(5)').clone();
</span> <span>$('#images').append($img);
</span> <span>}
</span> <span>});
</span><span>});</span>Demo ini menggunakan teknik yang sama seperti Demo 2 untuk mengesan apabila pengguna telah mencapai akhir dokumen, bukan hanya secara menegak tetapi juga mendatar. Setiap kali satu hujung dicapai, kami menambah baris baru atau lajur baru ke meja. Ia betul -betul jenis skrip yang boleh kita tulis jika kita mahu membuat aplikasi spreadsheet.
Perhatikan bahawa semua sel kosong. Indeks baris dan lajur dijana dengan kaunter CSS supaya kita tidak perlu mengira mereka sendiri.
Lihat spreadsheet Pen Infinite oleh SitePoint (@SitePoint) pada codepen.
<span><span><span><ul</span> id<span>="numbers"</span>></span> </span> <span><span><span><li</span>></span>1<span><span></li</span>></span> </span> <span><span><span><li</span>></span>2<span><span></li</span>></span> </span> <span><span><span><li</span>></span>3<span><span></li</span>></span> </span> <span><span><span><li</span>></span>4<span><span></li</span>></span> </span> <span><span><span><li</span>></span>5<span><span></li</span>></span> </span> … <span><span><span></ul</span>></span></span>
<span>$(document).ready(function() {
</span> <span>var offset = $('#numbers li').length;
</span>
<span>$('#numbers').endlessScroll({
</span> <span>fireOnce: false,
</span> <span>fireDelay: false,
</span> <span>loader: '',
</span> <span>insertAfter: '#numbers li:last',
</span> <span>content: function(i) {
</span> <span>return '<li>' + (i + offset) + '</li>';
</span> <span>}
</span> <span>});
</span><span>});</span>Terdapat kontra terhadap menatal tak terhingga: Jika ia tidak dilaksanakan dengan baik, pengalaman pengguna dapat dipecahkan. Jika anda membiarkan pengguna memuatkan senarai tak terhingga, mereka boleh kehilangan tempat mereka selepas beberapa ketika. Itulah perkara yang tidak pernah ditambah dengan sistem penomboran tradisional. Walau bagaimanapun, penomboran memerlukan tindakan dari pengguna yang tidak diperlukan dengan menatal tak terhingga.
Kedua -dua fakta ini memberikan Tim Severien idea: Bagaimana jika kita menggabungkan menatal dan penomboran tak terhingga, untuk mengambil kesempatan daripada kedua -dua kaedah? Hasilnya adalah demo terakhir ini.
Halaman awal ditunjukkan kepada pengguna. Apabila pengguna menatal ke bawah dan mencapai bahagian bawah halaman, halaman baru dimuat secara automatik. Di sini kita menikmati kesederhanaan dari Scrolling Infinite. Tetapi perkara -perkara baru datang dari senarai yang ditetapkan di bahagian bawah skrin.
Pada mulanya tersembunyi, senarai ini diisi, setiap kali halaman baru dimuatkan, dengan bilangan halaman ini. Dengan cara itu, jika pengguna ingin mengambil halaman kedua, mereka boleh tanpa usaha dengan memukul nombor yang sepadan.
lihat pena penipisan tatal tak tak terhingga oleh SitePoint (@SitePoint) pada codepen.
<span><span><span><div</span> class<span>="grid"</span>></span> </span> <span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span> </span> <span><span><span><p</span>></span>content<span><span></p</span>></span> </span> <span><span><span></div</span>></span> </span> … <span><span><span></div</span>></span> </span> <span><!-- The next page which content will be loaded when scrolled --> </span><span><span><span><nav</span> id<span>="pagination"</span>></span> </span> <span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span> </span><span><span><span></nav</span>></span></span>
Sila ambil perhatian bahawa kod ini menggunakan ES6, tetapi anda boleh menukarnya ke ES5.
<span>$(document).ready(function() {
</span> <span>var grid = $('.grid');
</span>
grid<span>.masonry({
</span> <span>itemSelector: '.grid-item',
</span> <span>columnWidth: 200
</span> <span>});
</span>
grid<span>.infinitescroll({
</span> <span>// Pagination element that will be hidden
</span> <span>navSelector: '#pagination',
</span>
<span>// Next page link
</span> <span>nextSelector: '#pagination p a',
</span>
<span>// Selector of items to retrieve
</span> <span>itemSelector: '.grid-item',
</span>
<span>// Loading message
</span> <span>loadingText: 'Loading new items…'
</span> <span>},
</span>
<span>// Function called once the elements are retrieved
</span> <span>function(new_elts) {
</span> <span>var elts = $(new_elts).css('opacity', 0);
</span>
elts<span>.animate({opacity: 1});
</span> grid<span>.masonry('appended', elts);
</span> <span>});
</span><span>});</span>kami telah melihat enam contoh yang berbeza untuk melaksanakan menatal tak terhingga. Tidak kira apa yang anda cuba bina, anda sepatutnya dapat menggunakan salah satu teknik ini untuk mencapai hasil yang anda inginkan. Seperti biasa, kami ingin mendengar pemikiran anda: Adakah anda telah membina sesuatu yang sejuk dengan salah satu plugin atau teknik ini? Adakah anda mempunyai plugin kegemaran yang anda fikir sepatutnya disebut? Beritahu kami dalam komen!
Atas ialah kandungan terperinci 6 JQuery Demo Menatal Infinite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan masalah bahawa fail msxml6.dll hilang
penggunaan arahan telnet
nombor siri cad2012 dan koleksi kunci
phpstudy
Bagaimana untuk menyalin jadual Excel untuk menjadikannya saiz yang sama dengan yang asal
Kod yang biasa digunakan dalam bahasa html
Apakah teknologi utama firewall?
Bagaimana untuk menyelesaikan ralat parse
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
