Saya ingin tahu apakah Anda telah memperhatikan bahwa situs web tampilan gambar biasa akan menggunakan efek aliran air terjun, apa yang disebut aliran air terjun
Gambar -gambar di situs web tidak akan di -cache sekaligus, tetapi akan menunggu Anda untuk menggulir ke jarak tertentu.
Gambar -gambar berikut akan terus di -cache, dan gambar -gambar itu juga muncul secara acak, tetapi lebarnya sama dan tingginya tidak
Seperti, tinggi dan rendah seperti air terjun, jadi mereka disebut efek aliran air terjun. Selanjutnya saya akan memberi Anda kodenya, semuanya
Mari kita coba beberapa gambar.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Aliran air terjun tidak mengulangi </itement> <tyle> *{margin: 0px; padding: 0px; List-style: none;} #box {lebar: 1000px; margin: 0 non-style: none;} #box {lebar: 1000px; margin: 0 200px; margin-right: 50px;} #box img {width: 200px;} </style> </head> <body> <v id = "box"> <ul></ul> <ul></ul> <ul></ul> <ul> </ul> </div> <ulcript> var box = document.getelbyid (') </ul> </ul> </Div> <cript> var box = document.getelbyid (' var ul = box.children; function insert () {var x = 0; var srcnum = math.floor (math.random ()*35); // 35 adalah 35 gambar, yang dapat diubah ke angka apa pun. Saya memiliki total 35 gambar di sini. var newli = document.createelement ('li'); newli.innerhtml = '<img src = "gambar/'+srcnum+'. png">'; // Ini adalah nama file gambar, dan persyaratannya seragam. var minh = math.min (ul [0] .clientHeight, ul [1] .clientHeight, ul [2] .clientHeight, ul [3] .clientHeight); untuk (var i = 0; i <ul.length; i ++) {if (ul [i] .clientHeight == minh) {x = i; merusak; }} ul [x] .AppendChild (newli); } untuk (var i = 0; i <20; i ++) {insert (); } document.onscroll = function () {var viewh = document.body.clientHeight || document.documentelement.clientHeight; var winh = document.documentelement.scrollheight; var scrollt = document.body.scrolltop || document.documentelement.scrolltop; if (winh-scrollt-viewh <500) {for (var i = 0; i <20; i ++) {insert (); }}} </script> </body> </html>Artikel di atas menggunakan JS untuk mencapai tampilan gambar efek aliran air terjun (contoh sederhana) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.