ฉันสงสัยว่าคุณสังเกตเห็นว่าเว็บไซต์แสดงภาพธรรมดาจะใช้เอฟเฟกต์การไหลของน้ำตกหรือไม่
รูปภาพในเว็บไซต์จะไม่ถูกแคชทั้งหมดในครั้งเดียว แต่จะรอให้คุณเลื่อนไปยังระยะทางที่แน่นอน
รูปภาพต่อไปนี้จะยังคงถูกแคชและรูปภาพก็ปรากฏขึ้นแบบสุ่ม แต่ความกว้างเหมือนกันและความสูงไม่ได้
เช่นเดียวกับที่สูงและต่ำเป็นเหมือนน้ำตกดังนั้นพวกเขาจึงเรียกว่าเอฟเฟกต์การไหลของน้ำตก ต่อไปฉันจะให้รหัสแก่คุณทุกคน
มาลองรูปภาพกันเถอะ
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การไหลของน้ำตกไม่ได้ทำซ้ำ </title> <style> *{margin: 0px; padding: 0px; list-style: none;} #box {width: 1000px; 200px; margin-right: 50px;} #box img {width: 200px;} </style> </head> <body> <div id = "box" ><ul></ul><ul></ul><ul></ul><ul></ul> var ul = box.children; ฟังก์ชันแทรก () {var x = 0; var srcnum = math.floor (math.random ()*35); // 35 คือ 35 รูปภาพซึ่งสามารถเปลี่ยนเป็นหมายเลขใด ๆ ฉันมีรูปภาพทั้งหมด 35 ภาพที่นี่ var newli = document.createElement ('li'); newli.innerhtml = '<img src = "images/'+srcnum+'. png">'; // นี่คือชื่อไฟล์ของภาพและข้อกำหนดนั้นเหมือนกัน var minh = math.min (ul [0] .clientheight, ul [1] .clientheight, ul [2] .clientheight, ul [3] .clientheight); สำหรับ (var i = 0; i <ul.length; i ++) {ถ้า (ul [i] .clientheight == minh) {x = i; หยุดพัก; }} ul [x] .AppendChild (newli); } สำหรับ (var i = 0; i <20; i ++) {แทรก (); } document.onscroll = function () {var viewh = document.body.clientheight || documentEnumentElement.ClientHeight; var winh = document.documentelement.scrollheight; var scrollt = document.body.scrolltop || document.documentelement.scrolltop; if (winh-scrollt-viewh <500) {สำหรับ (var i = 0; i <20; i ++) {insert (); }}} </script> </body> </html>บทความข้างต้นโดยใช้ JS เพื่อให้ได้การแสดงภาพของเอฟเฟกต์การไหลของน้ำตก (ตัวอย่างง่าย ๆ ) คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น