أتساءل عما إذا كنت قد لاحظت أن مواقع عرض الصور العادية ستستخدم تأثير تدفق الشلال ، ما يسمى بتدفق الشلال
لن يتم تخزين الصور على الموقع مؤقتًا في وقت واحد ، ولكن ستنتظر لك التمرير إلى مسافة معينة.
ستستمر الصور التالية في التخزين المؤقت ، وتظهر الصور أيضًا بشكل عشوائي ، لكن العرض هو نفسه والارتفاع ليس
مثل ، عالية ومنخفضة مثل الشلالات ، لذلك يسمى تأثير تدفق الشلال. بعد ذلك سأعطيك الرمز ، الجميع
لنجرب بعض الصور.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> لا يتكرر تدفق الشلال </title> <style> *{margin: 0px ؛ padding: 0px ؛ style: none ؛} #box {width: 1000px ؛ 200px ؛ Margin-Right: 50px ؛} #box img {width: 200px ؛} </sytor> </head> <body> <div id = "box"> <ul> </ul> <ul> </ul> <ul> </ul> <ul> <ul> <ul> </ul> </liv> <nscript> var box = document.getelementied ') ؛ var ul = box.children ؛ دالة insert () {var x = 0 ؛ var srcnum = Math.Floor (Math.Random ()*35) ؛ // 35 IS 35 صورة ، والتي يمكن تغييرها إلى أي رقم. لدي ما مجموعه 35 صورة هنا. var newli = document.createElement ('li') ؛ newli.innerhtml = '<img src = "الصور/'+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 ++) {if (ul [i] .clientheight == minh) {x = i ؛ استراحة؛ }} ul [x] .AppendChild (newli) ؛ } لـ (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>رمز المثال أعلاه لاستخدام JS لعرض تأثير تدفق الشلال هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.