تستخدم هذه المقالة رمز JS النقي لكتابة تأثير صفحة ويب تدفق الشلال ، وتنفيذ تخطيط تدفق الشلال الأساسي في البداية ، ومحاكاة وظيفة AJAX لتحميل وظيفة صورة جديدة بعد التمرير إلى الأسفل.
عيب:
1. البرنامج غير مستجيب ولا يمكنه ضبط عرض الصفحة في الوقت الفعلي ؛
2. عند إضافة صور بيانات محاكاة AJAX إلى البرنامج ، يتم إعادة وضع جميع الصور في الصفحة بأكملها مرة واحدة.
3. ينتظر البرنامج لتحميل جميع الصور قبل قراءة حجم الصورة. في الواقع ، هذا بالتأكيد غير ممكن.
4. في المشاريع الفعلية ، يجب أن يعطي برنامج الخلفية قيمة حجم الصورة واستخدام سمة العرض مباشرة للصورة في رمز JS.
أفكار لهذا البرنامج:
هيكل HTML:
<Body> <div id = "container"> <viv> <viv> <img src = "img/1.jpg"/> </viv> </viv> <viv> <viv> <img src = "img/2.jpg"/> </viv>
1. تهيئة التصميم
1. تعيين #container إلى الموقف: النسبي ؛
2. تعيين .box لتطفو: اليسار ؛
3. ضع جميع الصور بعد تحميل صفحة الويب ؛
3.1 تم إصلاح عرض الصورة. احسب عدد الصور التي يمكن استيعابها بواسطة كل صف من الصفحة الحالية ، والحصول على عرض #Container ، ثم تعيين الصفحة على الوسط ؛
3.2 حلقة من خلال جميع الصور ، والتصميم العائم الافتراضي لصور NUM الأولى هو الصف الأول ، و Array 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
المراقبة في الوقت الفعلي لارتفاع نافذة الصفحة الحالي هو: PageHight
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"> <viv> <viv> <img src = "img/1.jpg"/> </viv> </viv> <viv> <img src = "img/2.jpg"/> </viv> <div> <img src = "img/3.jpg"/>/div> </viv> </viv> <viv> <img src = "img/4.jpg"/> </viv> </viv> <viv> <img src = "img/5.jpg"/> </viv> </div> <div> <img src = "img/5.jpg"/>/div> </viv> </viv> <viv> <img src = "img/7.jpg"/> </viv> </viv> <viv> <img src = "img/8.jpg"/> </viv> </div> <div> <img src = "img/8.jpg"/>/div> </viv> </viv> <viv> <img src = "img/9.jpg"/> </viv> </viv> <viv> <img src = "img/9.jpg"/> </viv> <div> <div> <img src = img/10.jpg "/> src = "img/1.jpg"/> </viv> </viv> <viv> <div> <img src = "img/1.jpg"/> </viv> </viv> <viv> <img src = "img/2.jpg"/> </viv> <fiv> <img src = src = "img/4.jpg"/> </div> </viv> <viv> <div> <img src = "img/5.jpg"/> </viv> </viv> <viv> <img src = "img/ src = "img/6.jpg"/> </viv> </viv> <viv> <img src = "img/6.jpg"/> </viv> </viv> <viv> <img src = "img/6.jpg"/> </viv> <iv> src = "img/6.jpg"/> </viv> </viv> </viv> <viv> <viv> <img src = "img/7.jpg"/> </viv> </viv> <viv> <img src = "img/8.jpg"/> <viv> <img src = "img/9.jpg"/> </viv> </viv> <viv> <img src = "img/10.jpg"/> </viv> </viv> <viv> <img src = "img/1.jpg"/> <viv> <img src = "img/2.jpg"/> </viv> </viv> <viv> <img src = "img/3.jpg"/> </viv> </viv> <viv> <img src = "img/4.jpg"/> <viv> <img src = "img/5.jpg"/> </viv> </viv> <viv> <img src = "img/5.jpg"/> </viv> </viv> <viv> <img src = "img/6.jpg"/> <viv> <img src = "img/8.jpg"/> </viv> </viv> <viv> <img src = "img/8.jpg"/> </viv> </viv> <viv> <img src = "img/9.jpg"/> <viv> <img src = "img/9.jpg"/> </viv> </viv> <viv> <viv> <img src = "img/9.jpg"/> </viv> </viv> <viv> <div> <img src = "img/
style.css:
*{الهامش: 0 ؛ Padding: 0 ؛}#Container {position: relative ؛}. box {padding: 5px ؛ تعويم: اليسار ؛}. box_img {padding: 5px ؛ الحدود: 1px الصلبة #CCC ؛ box-shadow: 0 0 5px #ccc ؛ الحدود الحدودية: 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": G "} ، {" src ":" 2.jpg "} ، {" src ":" 3.jpg "} ، {" src ":" 4.jpg "} ، {" src ": window.onscroll = function () {if (checkflag ()) {// judge ما إذا كان سيتم تحميل البيانات الجديدة في أسفل var cparent = document.getElementById ("Container") ؛ // تحميل بيانات 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) ؛ } // إعادة وضع جميع بيانات الصورة بمجرد تحديد الموقع ("الحاوية" ، "المربع") ؛ }} ؛ 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 (lastContentheight <scrolltop + pageHeight) {return true ؛ }} الدالة imglocation (الأصل ، المحتوى) {// خذ جميع المحتويات تحت الوالدين من var cparent = document.getElementById (parent) ؛ var ccontent = getChildElement (cparent ، المحتوى) ؛ // قم بإنشاء عدد الصور لكل سطر وفقًا لعرض نافذة المتصفح الحالي وإصلاحه ، مركز Var imgwidth = ccontent [0] .OffSetWidth ؛ . cparent.style.csstext = "width:"+imgwidth*num+"px ؛ margin: 0 auto" ؛ // تنبيه ("توقف مؤقت") ؛ // قم بتعيين صفيف لاستضافة معلومات صورة الصف الأول var boxheightarr = [] ؛ لـ (var i = 0 ؛ i <ccontent.length ؛ i ++) {if (i <num) {// سجل ارتفاع الصورة في الصف الأول boxheightarr [i] = ccontent [i] .OffSeTheight ؛ // عندما يتم تحميل بيانات AJAX ، يقوم البرنامج بإعادة تحديد جميع الصور ، لذلك يجب مسح الصورة في الصف الأول الموضع: ccontent المطلق [i] .style.position = "static" ؛ } آخر {var minheight = math.min.apply (null ، boxheightarr) ؛ var minindex = getMinheightLocation (boxheightarr ، minheight) ؛ // ضع الصورة أسفل أصغر قيمة فهرس للصف الأول ccontent [i] ccontent [i] .style.top = minheight+"px" ؛ ccontent [i] .style.left = ccontent [minindex] .offSetLeft+"px" ؛ // بعد وضع الصورة ، قم بتحديث "ارتفاع الحد الأدنى للصف الأول من معلومات الصورة" ، // ثم استخدم الحلقة لتكرار هذا الإجراء حتى نهاية Boxheightarr [minindex] = boxheightarr [minindex] + ccontent [i] .OffseTheight ؛ }} ؛} // احصل على قيمة الفهرس مع أصغر ارتفاع في الصف الأول من الصورة getMinheightLocation (boxheightarr ، minheight) {for (var i in boxheightarr) {if (boxheightarr [i] == minheight) {return i ؛ }}} // الحصول على جميع boxfunction getChildElement (الوالد ، المحتوى) {contentArr = parent.getElementSbyClassName (content) ؛ إرجاع المحتوى ؛}صورة التكاثر:
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.