تشترك هذه المقالة في تأثير التحميل لتدفق شلال JS للرجوع إلى الجميع. المحتوى المحدد كما يلي
حدث تمرير الماوس ، عندما يقوم الماوس بالتمرير إلى الأسفل ، يقوم بتحميل الصورة ديناميكيًا.
1. كود HTML
<! doctype html> <html> <head> <meta charset = "utf -8"> <title> يدرك JS تأثير تدفق الشلال - صور التحميل الديناميكي </title> <link rel = "STYLESHEET" href = "css/waterflow.css </head> <body> <div id = "container"> <viv> <viv> <img src = "img/1.jpg"/> </div> </viv> <viv> <viv> <img src = "img/3.jpg"/> </viv> <div> src = "img/4.jpg"/> </div> </viv> <viv> <div> <img src = "img/5.jpg"/> </viv> </viv> <viv> <img src = "img/ src = "img/3.jpg"/> </viv> </viv> <viv> <img src = "img/3.jpg"/> </viv> </viv> <viv> <img src = "img/1.jpg"/> </viv> </div> <iv> <iv> <viv> <img src = "img/1.jpg"/> </viv> </viv> <viv> <img src = "img/2.jpg"/> </viv> </viv> <viv> <img src = "img/2.jpg"/> <viv> <img src = "img/4.jpg"/> </viv> </viv> <viv> <viv> <img src = "img/5.jpg"/> </viv> </viv> <viv> <img src = "img/5.jpg"/> </viv> </viv> </body> </html>
2. رمز CSS
*{الهامش: 0px ؛ Padding: 0px ؛}#Container {position: relative ؛}. box {padding: 5px ؛ تعويم: اليسار. الهامش: 0px auto ؛}. box_img {padding: 5px ؛ الحدود: 1px الصلبة #DCDCDC ؛ box-shadow: 0 0 5px #ccc ؛ الحدود الحدودية: 5px ؛}. box_img img {width: 230px ؛}3. كود جافا سكريبت
window.onload = function () {imglocation ("Container" ، "box") ؛ var imgdata = {"data": [{"src": "1.jpg"} ، {"src": "2.jpg"} ، {"src": "3.jpg"} ، {"src": "3.jpg"} ، 5.jpg "} ، {" src ":" 6.jpg "} ، {" src ":" 2.jpg "} ، {" src ":" 3.jpg "} ، {" src ":" 3.jpg "} ، {" window.onscroll = function () {// console.log (document.documentElement.scrolltop) ؛ if (checkflag ()) {var cParent = document.getElementById ("حاوية") ؛ لـ (var i = 0 ؛ i <imgdata.data.length ؛ i ++) {var ccontent = document.createElement ("div") ؛ ccontent.className = "box" ؛ cparent.appendchild (ccontent) ؛ var boximg = document.createElement ("div") ؛ boximg.className = "box_img" ؛ ccontent.appendchild (boximg) ؛ var img = document.createElement ("img") ؛ img.src = "img/"+imgdata.data [i] .src ؛ boximg.appendchild (IMG) ؛ // طريقة أخرى تضيف محتوى خلف div ، وليس الكتابة فوق المحتوى // var content = "<div class = 'box'> <div class = 'box_img'> <img src = 'img/"+imgdata.data [i] checkflag () {var cparent = document.getElementById ("حاوية") ؛ scrolltop = document.documentElement.scrolltop || document.body.scrolltop ؛ // scrollbar من أعلى ارتفاع var pageHight = document.documentElement.clientheight || document.body.clientheight ؛ if (lastContentheight <scrolltop+pageheight) {return true ؛ num = math.floor (document.documentElement.clientwidth/imgwidth) ؛ // ضع عدد الصور في صف واحد cparent.style.csstext = "العرض:"+imgwidth*num+"px ؛ margin: 0px auto" i = 0 ؛ i <ccontent.length ؛ i ++) {if (i <num) {boxheightarr [i] = ccontent [i] .OffSetheight ؛ console.log (minheight+"،"+minindex) ؛ boxheightarr [minindex]+= ccontent [i] .offsetheight ؛ // console.log (ccontent [i] .OffSetheight+"،"+ccontent [i] if (boxheightarr [i] == minheight) {return i}}} getChildElement (parent ، content) {// take contents on parent var contentarr = [] ؛ if (allContent [i] .className == "box") {contentArr.push (allContent [i]) ؛ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.