บทความนี้แบ่งปันผลการโหลดของการไหลของน้ำตก JS สำหรับการอ้างอิงของทุกคน เนื้อหาเฉพาะมีดังนี้
เหตุการณ์การเลื่อนเมาส์เมื่อเมาส์เลื่อนไปที่ด้านล่างโหลดภาพแบบไดนามิก
1. รหัส HTML
<! doctype html> <html> <head> <meta charset = "utf -8"> <title> js ตระหนักถึงเอฟเฟกต์การไหลของน้ำตก - ภาพการโหลดแบบไดนามิก </title> <link rel = "stylesheet" href = "css/waterfallow.cs </head> <body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> </div> <div> <img src = "img/3.jpg"/> </div> src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> src = "img/3.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> </div <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> </div> </body> </html>
2. รหัส CSS
*{มาร์จิ้น: 0px; Padding: 0px;}#container {ตำแหน่ง: relation;}. กล่อง {padding: 5px; ลอย: ซ้าย; มาร์จิ้น: 0px auto;}. box_img {padding: 5px; ชายแดน: 1px Solid #DCDCDC; Box-Shadow: 0 0 5px #ccc; Border-Radius: 5px;}. box_img img {width: 230px;}3. รหัส JavaScript
window.onload = function () {imglocation ("container", "box"); วาจา imgdata = {"data": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "3.jpg"}, {"src": 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.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] .src+"// cparent.innerhtml checkFlag () {var cparent = document.getElementById ("คอนเทนเนอร์"); scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // scrollbar มาจากความสูงสูงสุด var pageheight = document.documentelement.clientheight || document.body.clientheight; // ความสูงของหน้าจอ // console.log if (LastContentheight <Scrolltop+PageHeight) {return true;}} imglocation ฟังก์ชั่น (พาเรนต์, เนื้อหา) {var cparent = document.getElementById (parent); num = math.floor (document.documentelement.clientwidth/imgwidth); // ใส่จำนวนรูปภาพในหนึ่งแถว cparent.style.csstext = "ความกว้าง:"+imgwidth*num+"px; i = 0; i <ccontent.length; i ++) {ถ้า (i <num) {boxheightarr [i] = ccontent [i] .offsetheight; ดัชนี // console.log (minheight+","+minindex); BoxHeightarr [minindex]+= ccontent [i] .offsetheight; // console.log (ccontent [i] .offsetheight+","+ccontent [i] .Height); // ccontent [i] BoxHeightarr) {if (BoxHeightarr [i] == minheight) {return i}}} ฟังก์ชั่น getChildElement (ผู้ปกครอง, เนื้อหา) {// ใช้เนื้อหาทั้งหมดภายใต้ parent var contentAr = []; if (allcontent [i] .className == "Box") {contentAr.push (allContent [i]);ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น