أتساءل عما إذا كنت قد لاحظت أن مواقع عرض الصور العادية ستستخدم تأثير تدفق الشلال ، ما يسمى بتدفق الشلال
لن يتم تخزين الصور على الموقع مؤقتًا في وقت واحد ، ولكن ستنتظر لك التمرير إلى مسافة معينة.
ستستمر الصور التالية في التخزين المؤقت ، وتظهر الصور أيضًا بشكل عشوائي ، لكن العرض هو نفسه والارتفاع ليس
مثل ، عالية ومنخفضة مثل الشلالات ، لذلك يسمى تأثير تدفق الشلال. بعد ذلك سأعطيك الرمز ، الجميع
لنجرب بعض الصور.
<! 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 أكثر.