ให้ฉันแสดงการเรนเดอร์ก่อน:
เมื่อเลื่อนหน้าเว็บลงรูปภาพสามารถโหลดและแสดงโดยอัตโนมัติได้
โมเดลกล่องที่เก็บรูปภาพมีดังนี้:
<div> <div> <img src = "img/8.jpg"> </div> </div>
ตั้งค่า IMG-Width เป็น 150px จากนั้น Box_IMG จะเพิ่มอัตรากำไรขั้นต้นและเอฟเฟกต์เงาระยะขอบด้านนอกของกล่องคือ 0 เพิ่มระยะขอบด้านใน ความกว้างของกล่องถูกยืดออกโดย IMG-Width และ Margins กล่าวอีกนัยหนึ่งไม่มีระยะห่างระหว่างกล่อง แต่มีระยะขอบอยู่ในกล่อง ด้วยวิธีนี้เมื่อตั้งค่าตำแหน่งของ JS คุณไม่จำเป็นต้องพิจารณาปัญหามาร์จิ้นเพียงแค่เรียกความกว้างของกล่อง
ตั้งค่าตำแหน่งของ DIV ที่เก็บกล่องทั้งหมดไว้เป็นญาติดังนั้นเมื่อตั้งค่าสูงสุดหรือค่าซ้ายคุณไม่จำเป็นต้องพิจารณาคุณลักษณะขอบด้านนอกสุด
วางภาพ: รับความสูงของแถวแรกของรูปภาพและเก็บไว้ในอาร์เรย์ ตั้งตำแหน่งให้สัมบูรณ์ในภาพถัดไปวางไว้ด้านล่างภาพด้วยความสูงที่เล็กที่สุดจากนั้นตั้งค่าด้านบนและซ้ายและเพิ่มค่าต่ำสุดของอาร์เรย์ลงไปที่ความสูงของภาพที่วางใหม่ กล่าวอีกนัยหนึ่งยกเว้นบรรทัดแรกรูปภาพต้นฉบับที่วางไว้ใน HTML จะถูกจัดตำแหน่งใหม่ใน JS
เมื่อเลื่อนหน้าไปที่ด้านล่างฟังก์ชั่นเหตุการณ์จะถูกเรียกใช้และจากนั้นรูปภาพบางภาพจะถูกวางไว้เพื่อให้แน่ใจว่าการโหลดรูปภาพที่ไม่มีที่สิ้นสุด
ไฟล์ html:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "Stylesheet" href = "Waterfall.css" type = "css"> <script src = "waterfall.js" id = "เนื้อหา"> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/ src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <ive> <img> <img src = "img/.jpg"> </div> src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <div> <img src =" img/.jpg "> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <img src = "img/.jpg src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> src = "img/.jpg"> </div> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg " src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div>
ไฟล์ CSS:
*{margin:; padding:;} #content {ตำแหน่ง: ญาติ; พื้นหลัง-สี: #;}. กล่อง {padding: px; float: ซ้าย;}. box_img {padding: px; border: px solid #cccccc;ไฟล์ JS:
ฟังก์ชั่น Math.floor () สามารถปัดเศษลงได้
math.min.apply (null, heightarr); ฟังก์ชั่นสามารถรับค่าต่ำสุดของอาร์เรย์ Higharr
window.onscroll = function () {}; ฟังก์ชั่นนี้ถูกทริกเกอร์เมื่อเลื่อนหน้า
document.documentelement.clientheight; ความสูงที่แสดงโดยเบราว์เซอร์
document.documentelement.scrolltop; ระยะทางในการเลื่อน
/*** สร้างโดย ASUA เมื่อ 2016/4/9.*/window.onload = function () {imglocation ("เนื้อหา", "box"); var lodeImage = {"วันที่": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"} "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onscroll = function () i = 0; i <lodeimage.date.length; i ++) {var box = document.createElement ("div"); box.className = "box"; var cparent = document.getElementById ("เนื้อหา"); box_img = document.createelement ("div"); box_img.classname = "box_img"; box.appendchild (box_img); var img = document.createElement ("img"); img.src = "img/"+lodeimage.date [i] .src; box_img.appendchild (img);} imglocation ("เนื้อหา", "box"); ccontent = getChildElement (cparent, "box"); var lastContentheight = ccontent [ccontent.length-1] .offSettop; pageHeight = document.documentelement.clientheight || document.body.clientheight; console.log (LastContentheight+":"+scrollheight+":"+pageHeight); ถ้า (สุดท้าย cparent = document.getElementById (parent); var ccontent = getChildElement (cparent, เด็ก); var imgwidth = ccontent [0] .offsetWidth; var; cols = math.floor (document.documentelement.clientwidth/imgwidth); cparent.style.csstext = "ความกว้าง:"+imgwidth*cols+"px; margin: 30px auto"; var heightarr = []; i = 0; i <ccontent.length; i ++) {ถ้า (i <cols) {heightarr.push (ccontent [i] minindex = getMinIndex (ightarr, minheight); ccontent [i] .style.position = "สัมบูรณ์"; ccontent [i] .style.top = minheight+"px" ; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; heightarr [minindex]+= ccontent [i] .offsetheight;}}}} getMinIndex (heightarr, minheight) {สำหรับ (var i = 0; i <heightarr.length; i ++) {ถ้า (heightarr [i] == minheight) {return i;}}} ฟังก์ชั่น getChildElement i = 0; i <allContent.length; i ++) {ถ้า (allContent [i] .className == เนื้อหา) {contentAr.push (allContent [i]);}} ส่งคืน contentarr;}โอเครหัสสำหรับเอฟเฟกต์การไหลของน้ำตกที่โหลดภาพโดย JS โดยอัตโนมัติได้รับการแนะนำให้รู้จักกับคุณที่นี่ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!