اسمحوا لي أن أريكم العروض أولا:
عند الانزلاق أسفل صفحة الويب ، يمكن تحميل الصورة وعرضها تلقائيًا.
نموذج الصندوق الذي يحمل الصور كما يلي:
<viv> <viv> <img src = "img/8.jpg"> </viv> </viv>
قم بتعيين IMG-Width على 150 بكسل ، ثم يضيف Box_img تأثيرات داخلية للظلال والظل ، والهامش الخارجي في Box هو 0 ، إضافة الهامش الداخلي. يمتد عرض الصندوق بواسطة IMG-Width والهوامش. بمعنى آخر ، لا يوجد تباعد بين الصناديق ، ولكن هناك بعض الهوامش داخل الصندوق. وبهذه الطريقة ، عند تعيين موضع JS ، لا يتعين عليك التفكير في مشكلة الهامش ، ما عليك سوى استدعاء عرض المربع.
قم بتعيين موضع DIV الذي يحمل جميع الصناديق على النسبية ، لذلك عند تعيين القيمة العليا أو القيمة اليسرى ، لا تحتاج إلى النظر في سمة الهامش الخارجي.
ضع الصورة: احصل على ارتفاع الصف الأول من الصورة وقم بتخزينه في الصفيف. اضبط الموضع على المطلق في الصورة التالية ، ضعه أسفل الصورة بأصغر ارتفاع ، ثم قم بتعيين الأعلى واليسار ، وأضف الحد الأدنى لقيمة الصفيف إلى ارتفاع الصورة الموضوعة حديثًا. بمعنى آخر ، باستثناء السطر الأول ، يتم إعادة وضع الصور الأصلية الموضوعة في HTML في JS.
عند تحريك الصفحة إلى الأسفل ، يتم تشغيل وظيفة الحدث ، ثم يتم وضع بعض الصور لضمان التحميل اللانهائي للصور.
ملف HTML:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "stylesheet" href = "waterfall.css" type = "text/css"> <script src = "waterfall. id = "content"> <viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <viv> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img> <img src = "img/.jpg"> </viv> <viv> <iv> <img> <img src = "img/.jpg"> </div> </viv> <viv> <viv> <div> <img src = "img/.j src =" img/.jpg "> </viv> <viv> <div> <img src =" img/.jpg src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </div> <div> <img src = img/.jpg " src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <iv> <img src = "img/.jpg" src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg" src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg" src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <div> <img src = "img/.jpg" src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </fiv> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </viv> <viv> <iv> <img> <img src = "img/.jpg" src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <img src = "img/.jpg src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg" src = "img/.jpg"> </div> </viv> <viv> <img src = "img/.jpg"> </viv> <viv> <img src = "img/.jpg"> </viv> <div> <div> src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </viv> <viv> <img src = "img/.jpg"> </viv> </div> <img src = "img/.jpg">
ملف CSS:
*{margin: ؛ padding: ؛} #content {الموضع: النسبية ؛ الخلفية اللون: #؛ملف JS:
يمكن تقريب وظيفة Math.Floor () لأسفل.
The Math.min.apply (NULL ، HEAVERARR) ؛ يمكن أن تحصل الوظيفة على الحد الأدنى لقيمة صفيف الارتفاع.
window.onscroll = function () {} ؛ يتم تشغيل هذه الوظيفة عند تحريك الصفحة.
document.documentElement.clientheight ؛ الارتفاع الذي يظهره المتصفح.
document.documentElement.scrolltop ؛ المسافة إلى الشريحة.
/*** تم إنشاؤه بواسطة ASUA في 2016/4/9.*/window.onload = function () {imglocation ("content" ، "box") ؛ var lodeimage = {"date": [{"src": "1.jpg"} ، {"src": "2.jpg"} ، {"src": "3.jpg"} ، {"src": "SRC": "7.jpg"} ، {"src": "8.jpg"} ، {"src": "9.jpg"} ، {"src": i = 0 ؛ i <lodeimage.date.length ؛ i ++) {var box = document.createElement ("div") ؛ box.className = "box" ؛ var cparent = document.getElementById ("content") ؛ cparent.appendchild (box) ؛ var 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] ccontent = getChildElement (cparent ، "box") ؛ var lastContentheight = ccontent [ccontent.length-1] .OffSetTop ؛ var scrollheight = document.documentElement.scrolltop || document.body.scrolltop ؛ var pageheight = document.documentElement.clientheight || document.body.clientheight ؛ console.log (lastContentheight+":"+scrollheight+": ccontent = getChildElement (cparent ، الطفل) ؛ var imgwidth = ccontent [0] heightarr = [] ؛ for (var i = 0 ؛ i <ccontent.length ؛ i ++) {if (i <cols) {heastarr.push (ccontent [i] minIndex = getMinIndex (Heightarr ، minheight) ؛ ccontent [i] .style.position = "aboSt" ؛ ccontent [i] .style.top = minheight+"px" ؛ ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px" ؛ heightarr [minindex]+= ccontent [i] .OffSetheight ؛}}} getMinIndex (heightarr ، minheight) {for (var i = 0 ؛ i <heaftarr.length ؛ i ++) {if (heightarr [i] == minheight) {return i ؛}}} function getChildElement (far ، content) {var contentarr = [] i = 0 ؛ i <allcontent.length ؛ i ++) {if (allContent [i] .className == content) {contentArr.push (allcontent [i]) ؛}} return contentArr ؛}حسنًا ، تم تقديم رمز تأثير تدفق الشلال الذي يتم تحميل الصور تلقائيًا بواسطة JS هنا. آمل أن يكون ذلك مفيدًا لك!