เนื่องจากไม่มีเซิร์ฟเวอร์ฉันจึงใช้สตริง JSON เป็นแหล่งที่มาของการโหลดข้อมูลภาพเมื่อดึงลงมา
html:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/waterfall.js"> </script> } .pin {padding: 15px 0 0 15px; ลอย: ซ้าย; } .box {padding: 10px; ชายแดน: 1px Solid #CCC; Box-Shadow: 0 0 6px #ccc; แนวชายแดน: 5px; } .box img {width: 162px; ความสูง: อัตโนมัติ; } </style> </head> <body> <div id = "main"> <div> <div> <img src = "./ images/1.jpg"/> </div> </div> <div> <img src = "./ ภาพ/2.jpg"/> </div> <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ ภาพ/5.jpg"/> <div> <img src = "./ images/7.jpg"/> </div> </div> <div> <img src = "./ images/8.jpg"/> </div> </div> <div> <img src = "./9.jpg"/> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = " </div> </div> <div> <img src = "./ images/10.jpg"/> </div> </div> <div> <img src = "./ images/11.jpg"/> </div> </div> <iMg> src = "./ images/12.jpg"/> </div> </div> <div> <img src = "./ images/13.jpg"/> </div> </div> <div> <img src = "./ ภาพ/14.jpg"/> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <iMg> <img src = "ภาพ/14.jpg"/> </div> </div> <div> <img src = "./ images/16.jpg"/> </div> </div> <div> <img src = "./ images/17.jpg"/> </div> </div> src = "./ images/18.jpg"/> </div> </div> <div> <img src = "./ images/19.jpg"/> </div> </div> <div> <img src = "./ ภาพ/20.jpg"/> </div> </div> </div> </body> </html>jswallper.js:
window.onload = function () {น้ำตก ('หลัก', 'pin'); var dataint = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]}; window.onscroll = function () {ถ้า (checkscrollside ()) {var oparent = document.getElementById ('main'); // วัตถุพาเรนต์สำหรับ (var i = 0; i <dataint.data.length; // เพิ่มโหนดองค์ประกอบ enpons.className = 'pin'; // เพิ่มแอตทริบิวต์ชื่อคลาส Oparent.AppendChild (anper); // เพิ่มโหนดเด็ก var obox = document.createelement ('div'); obox.className = 'box'; emnes.appendchild (Obox); var oimg = document.createElement ('img'); oimg.src = './images/'+dataint.data [i] .src; Obox.AppendChild (OIMG); } น้ำตก ('หลัก', 'pin'); - }}/* องค์ประกอบ PINTER PARTEN PINT ID*/Function Waterfall (Parent, Pin) {var oparent = document.getElementById (parent); // วัตถุพาเรนต์ var apin = getClassObj (oparent, pin); // รับอาร์เรย์ของกล่องเก็บบล็อก num = math.floor (document.documentelement.clientwidth/ipinw); // จำนวนพินที่สามารถรองรับได้ในแต่ละแถว [ความกว้างของหน้าต่างหารด้วยความกว้างของกล่องบล็อกหนึ่ง] Oparent.style.csstext = 'ความกว้าง:'+ipinw*num+'px; มาร์จิ้น: 0 auto; '; // ตั้งค่ารูปแบบการจัดศูนย์หลัก: ความกว้างคงที่ + ระยะขอบแนวนอนอัตโนมัติ var pinharr = []; // ใช้เพื่อเก็บความสูงของกล่องบล็อกทั้งหมดในแต่ละคอลัมน์ A for (var i = 0; i <apin.length; i ++) {// โอนองค์ประกอบกล่องบล็อกแต่ละอันของอาร์เรย์ apin var pinh = apin [i] .offSetheight; if (i <num) {pinharr [i] = pinh; // พินกล่องบล็อกจำนวนในแถวแรกจะถูกเพิ่มลงในอาร์เรย์ pinharr} else {var minh = math.min.apply (null, pinharr); // ค่าต่ำสุดในอาร์เรย์ pinharr minh var minhindex = getMinhindex (Pinharr, minh); apin [i] .style.position = 'สัมบูรณ์'; // ตั้งค่าการกระจัดแบบสัมบูรณ์ apin [i] .style.top = minh+'px'; apin [i] .style.left = apin [minhindex] .offsetleft+'px'; // ความสูงขององค์ประกอบสูงต่ำสุดของอาร์เรย์ + เพิ่ม apin [i] บล็อกความสูงของกล่องบล็อก pinharr [minhindex] + = apin [i] .offsetheight; // อัปเดตความสูงของคอลัมน์หลังจากเพิ่มกล่องบล็อก}}}/*รับอาเรย์ขององค์ประกอบเด็กเดียวกัน obj = parent.getElementsByTagname ('*'); // รับส่วนย่อยทั้งหมดของ parent var pins = []; // สร้างอาร์เรย์เพื่อรวบรวมองค์ประกอบลูกสำหรับ (var i = 0; i <obj.length; i ++) {// transf องค์ประกอบของเด็ก Pins.push (obj [i]); - ส่งคืนพิน;}/*****รับดัชนีของดัชนีความสูงพินขั้นต่ำ*/ฟังก์ชั่น getMinhindex (arr, minh) {สำหรับ (var i ใน arr) {ถ้า (arr [i] == minh) {return i; }}} ฟังก์ชั่น checkscrollside () {var oparent = document.getElementById ('main'); var apin = getclassobj (oparent, 'pin'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offsetheight/2); // สร้างความสูงของ [ทริกเกอร์บ็อกซ์ฟังก์ชั่นน้ำตก ()]: กล่องสุดท้าย) scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // ความสูงของกระดาษส่งคืน (lastpinh <scrolltop+documenth)? true: false; // return true หลังจากถึงความสูงที่ระบุไดอะแกรมการสาธิต:
ดาวน์โหลดซอร์สโค้ด: //www.vevb.com/jiaoben/452663.html
ที่อยู่ตัวอย่าง: http://demo.vevb.com/js/2016/jswallper/