บทความนี้ใช้รหัส JS บริสุทธิ์ในการเขียนเอฟเฟกต์หน้าเว็บน้ำตก Flowfall โดยเริ่มต้นการใช้เค้าโครงการไหลของน้ำตกพื้นฐานและจำลองข้อมูล AJAX โหลดฟังก์ชั่นภาพใหม่หลังจากเลื่อนไปที่ด้านล่าง
ข้อบกพร่อง:
1. โปรแกรมไม่ตอบสนองและไม่สามารถปรับความกว้างของหน้าแบบเรียลไทม์
2. เมื่อเพิ่มรูปภาพข้อมูลการจำลอง AJAX ลงในโปรแกรมรูปภาพทั้งหมดในหน้าทั้งหมดจะถูกจัดตำแหน่งใหม่หนึ่งครั้ง
3. โปรแกรมรอให้โหลดรูปภาพทั้งหมดก่อนที่จะอ่านขนาดของภาพ ในความเป็นจริงนี่เป็นไปไม่ได้แน่นอน
4. ในโครงการจริงโปรแกรมพื้นหลังควรให้ค่าขนาดภาพและใช้แอตทริบิวต์ความกว้างของภาพในรหัส JS โดยตรง
แนวคิดสำหรับโปรแกรมนี้:
โครงสร้าง HTML:
<body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div>
1. เริ่มต้นเค้าโครง
1. ตั้ง #Container เป็นตำแหน่ง: ญาติ;
2. Set. Box to Float: ซ้าย;
3. วางตำแหน่งรูปภาพทั้งหมดหลังจากโหลดหน้าเว็บ
3.1 ความกว้างของภาพได้รับการแก้ไข คำนวณจำนวนรูปภาพที่สามารถรองรับได้โดยแต่ละแถวของหน้าปัจจุบันและรับความกว้างของ #Container จากนั้นตั้งค่าหน้าเป็นศูนย์
3.2 วนผ่านรูปภาพทั้งหมดเค้าโครงลอยตัวเริ่มต้นของรูปภาพ NUM แรกเป็นแถวแรกและอาร์เรย์ boxHeightarr = [];
3.3 หลังจากเค้าโครงบรรทัดแรกเสร็จสมบูรณ์จัดเตรียมรูปภาพถัดไปและอัปเดต BoxHeightarr []:::
3.3.1 วางภาพถัดไปด้านล่างภาพที่สั้นที่สุดในแถวแรก (ตำแหน่ง: สัมบูรณ์) นั่นคือคอลัมน์ที่มีความสูงที่เล็กที่สุดใน BoxHeightarr [] และบันทึกค่าดัชนีของหมายเลขต่อไปนี้: minindex;
3.3.2 อัปเดตค่าที่เล็กที่สุดใน BoxHeightarr [] (BoxHeightarr [minindex]+ความสูงของภาพปัจจุบัน);
3.4 ทำซ้ำรอบ 3.3 ขั้นตอนจนกว่ารูปภาพทั้งหมดจะถูกจัดเรียง
2. การตรวจสอบความสูงการเลื่อนแบบเรียลไทม์ไม่ว่าจะโหลดข้อมูลใหม่
1. หลังจากการเริ่มต้นเสร็จสิ้นให้รับความสูงของภาพสุดท้ายจากด้านบน: LastContentheight
2. ใช้ window.onscroll = function () {... }
การตรวจสอบแบบเรียลไทม์ของความสูงสโครลของหน้าปัจจุบันคือ: Scrolltop
การตรวจสอบแบบเรียลไทม์ของความสูงของหน้าต่างหน้าปัจจุบันคือ: pageHeight
3. เมื่อหน้าตรวจสอบ: LastContentheight <ScrollTop + PageHeight ให้ใช้ AJAX เพื่อรับข้อมูล JSON ของรูปภาพที่เพิ่มขึ้นใหม่
3. เพิ่มเนื้อหาใหม่ที่ด้านล่างของหน้า
1. ใช้ลูปเพื่อสร้างคอนเทนเนอร์รูปภาพใหม่ก่อนเพิ่มลงในด้านล่างจากนั้นเขียนข้อมูลรูปภาพที่เกี่ยวข้องเช่นเส้นทางในข้อมูล JSON ไปยังคอนเทนเนอร์เพื่อเติมเต็มรูปภาพให้เสร็จสมบูรณ์
2. หลังจากเพิ่มรูปภาพใหม่ทั้งหมดแล้วให้ทำการเริ่มต้นการดำเนินการเริ่มต้นของขั้นตอนที่ 1 สำหรับรูปภาพและเลย์เอาต์ทั้งหมดของทั้งหน้า
โฟลเดอร์โครงการ:
index.html: ส่วนก่อนสถานที่ของข้อมูลภาพ
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" type = "text/css" href = "css/style.css"/> <script src = "js/app.js" id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg" </div> </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg" </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> src = "img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> src = "img/6.jpg"/> </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/4.jpg"/> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/10.jpg"
style.css:
*{มาร์จิ้น: 0; Padding: 0;}#container {ตำแหน่ง: ญาติ;}. กล่อง {padding: 5px; ลอย: ซ้าย;}. box_img {padding: 5px; ชายแดน: 1px Solid #CCC; Box-Shadow: 0 0 5px #ccc; Border-Radius: 5px;}. box_img img {width: 150px; ความสูง: auto;}app.js:
window.onload = function () {imglocation ("container", "box"); // ajax จำลองข้อมูล var imgdata = {"data": [{"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.JPG"} g "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "}, {" src ":" 6.jpg "} window.onscroll = function () {ถ้า (checkflag ()) {// ตัดสินว่าจะโหลดข้อมูลใหม่ที่ด้านล่าง var cparent = document.getElementById ("คอนเทนเนอร์"); // โหลดข้อมูล Ajax ลงในหน้าสำหรับ (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); } // เปลี่ยนตำแหน่งข้อมูลภาพทั้งหมดเมื่อ imglocation ("คอนเทนเนอร์", "box"); }}}; ฟังก์ชั่น checkFlag () {var cparent = document.getElementById ("container"); var ccontent = getChildElement (cparent, "box"); // รับความสูงของภาพสุดท้ายจากด้านบน, ความสูงของการเลื่อน, ความสูงของหน้าต่าง var lastcontentheight = ccontent [ccontent.length-1] .offsettop; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pageHeight = document.documentelement.clientheight || document.body.clientheight; console.log (LastContentheight+":"+scrolltop+":"+pageHeight); if (LastContentEight <scrolltop + pageHeight) {return true; }} function imglocation (parent, content) {// นำเนื้อหาทั้งหมดภายใต้พาเรนต์ออกจาก var cparent = document.getElementById (parent); var ccontent = getChildElement (cparent, เนื้อหา); // แก้ไขจำนวนรูปภาพต่อบรรทัดตามความกว้างของหน้าต่างเบราว์เซอร์ปัจจุบันและแก้ไขมันกลาง var imgwidth = ccontent [0] .offsetWidth; // OffsetWidth = Width + Padding + Border var num = math.floor (document.documentelement.clientWidth /imgwidth); cparent.style.csstext = "ความกว้าง:"+imgwidth*num+"px; margin: 0 auto"; // แจ้งเตือน ("หยุดชั่วคราว"); // ตั้งค่าอาร์เรย์เพื่อโฮสต์ข้อมูลภาพของแถวแรก var boxHeightarr = []; สำหรับ (var i = 0; i <ccontent.length; i ++) {ถ้า (i <num) {// บันทึกความสูงของรูปภาพในแถวแรก BoxHeightarr [i] = ccontent [i] .offSetheight; // เมื่อโหลดข้อมูล AJAX โปรแกรมจะเปลี่ยนตำแหน่งทั้งหมดรูปภาพทั้งหมดดังนั้นรูปภาพในแถวแรกจะต้องล้างตำแหน่ง: สัมบูรณ์ ccontent [i] .style.position = "คงที่"; } else {var minheight = math.min.apply (null, boxheightarr); var minindex = getMinheightLocation (BoxHeightarr, minheight); // ใส่ภาพด้านล่างค่าดัชนีที่เล็กที่สุดของแถวแรก ccontent [i] .style.position = "สัมบูรณ์"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; // หลังจากวางรูปภาพให้อัปเดต "ความสูงขั้นต่ำของข้อมูลแถวแรก", // จากนั้นใช้ For Loop เพื่อทำซ้ำการกระทำนี้จนกว่าจะสิ้นสุด BoxHeightarr [minindex] = BoxHeightarr [minindex] + ccontent [i] }};} // รับค่าดัชนีด้วยความสูงที่เล็กที่สุดของแถวแรกของภาพ getMinHeightLocation (BoxHeightarr, minheight) {สำหรับ (var i ใน BoxHeightarr) {ถ้า (BoxHeightarr [i] == minheight) {return i; }}} // รับ boxfunction ทั้งหมด getChildElement (พาเรนต์, เนื้อหา) {contentAr = parent.getElementsByClassName (เนื้อหา); ส่งคืน ContentArr;}ภาพการทำซ้ำ:
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript