نظرًا لعدم وجود خادم ، أستخدم سلسلة JSON كمصدر لتحميل بيانات الصورة عند الانسحاب
HTML:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <script src = "js/waterfall.js"> </script> <النمط نوع = "text/css" } .pin {padding: 15px 0 0 15px ؛ تعويم: اليسار. } .box {padding: 10px ؛ الحدود: 1px الصلبة #CCC ؛ box-shadow: 0 0 6px #ccc ؛ الحدود الحدودية: 5px ؛ } .box img {width: 162px ؛ الارتفاع: السيارات ؛ } </style> </head> <body> <div id = "main"> <viv> <viv> <img src = "./ images/1.jpg"/> </div> </viv> <viv> <img src = "./ images/2.jpg"/> </div> <iv> <img src = ". <img src = "./ images/4.jpg"/> </viv> </viv> <viv> <img src = "./ images/4.jpg"/> </viv> </viv> <viv> <img src = "./ images/5.jpg"/> <viv> <img src = "./ images/7.jpg"/> </viv> </viv> <viv> <img src = "./ images/8.jpg"/> </viv> </viv> <viv> <img src = "./ images/9.jpg"/> </viv> <viv> <img src = "./ images/10.jpg"/> </viv> </viv> <div> <img src = "./ images/ </viv> </viv> <viv> <img src = "./ images/10.jpg"/> </viv> </viv> <viv> <img src = "./ images/11.jpg"/> </viv> </div> <div> <img src = ". src = "./ images/12.jpg"/> </viv> </viv> <viv> <img src = "./ images/13.jpg"/> </viv> </viv> <viv> <img src = "./ images/14.jpg"/> <viv> <img src = "./ images/16.jpg"/> </viv> </viv> <viv> <img src = "./ images/16.jpg"/> </viv> </viv> <viv> <img src = "./ images/14.jpg"/> </viv> </viv> <viv> <img src = "./ images/16.jpg"/> </viv> </viv> <div> <img src = "./ images/17.jpg"/> </viv> </div> <div> <img src = ". src = "./ images/18.jpg"/> </viv> </viv> <viv> <img src = "./ images/19.jpg"/> </viv> </viv> <viv> <img src = "./ images/20.jpg"/> </div> <iv> <img src = ". </viv> </viv> </body> </html>jswallper.js:
window.onload = function () {waterfall ('main' ، 'pin') ؛ var dataint = {'data': [{'src': '1.jpg'} ، {'src': 'Jpg'} ، {'src': '3.jpg'} ، {'src': '4.jpg'}]} ؛ window.onscroll = function () {if (checkscrollide ()) {var oparent = document.getElementById ('main') ؛ // parent object for (var i = 0 ؛ i <dataint.data.length ؛ i ++) {var expant = document.createlement ('div') ؛ // إضافة العنصر العقدة // إضافة اسم فئة السمة oparent.appendchild (Opin) ؛ // إضافة Node Node var obox = document.createElement ('div') ؛ obox.classname = 'box' ؛ Opin.AppendChild (Obox) ؛ var oimg = document.createElement ('img') ؛ oimg.src = './images/'+dataint.data [i] .Src ؛ obox.appendchild (OIMG) ؛ } الشلال ('main' ، 'pin') ؛ } ؛ }}}/* Parent ID PIN ID ID IDER*/function waterfall (parent ، pin) {var oparent = document.getElementById (parent) ؛ // parent object var apin = getClassObj (oparent ، pin) ؛ // get the the the story block box pin apin var ipinw = apin [0]. num = math.floor (document.documentElement.clientwidth/ipinw) ؛ // عدد المسامير التي يمكن استيعابها في كل صف [عرض نافذة مقسومة على عرض مربع كتلة واحد] oparent.style.csstext = 'width:'+ipinw*num+'px ؛ الهامش: 0 auto ؛ '؛ a for (var i = 0 ؛ i <apin.length ؛ i ++) {// نقل كل عنصر مربع كتلة من صفيف apin var pinh = apin [i] .offsetheight ؛ if (i <num) {pinharr [i] = pinh ؛ // تتم إضافة دبوس مربع كتلة NUM في الصف الأول إلى صفيف pinharr} آخر {var minh = math.min.apply (null ، pinharr) ؛ // القيمة الدنيا في صفيف pinharr minh var minhindex = getMinhindex (pinharr ، minh) ؛ Apin [i] .style.position = 'absomute' ؛ // اضبط الإزاحة المطلقة apin [i] .style.top = minh+'px' ؛ Apin [i] .style.left = apin [minhindex] .offSetLeft+'px' ؛ . obj = parent.getElementsByTagName ('*') ؛ // احصل على جميع المجموعات الفرعية من دبابيس var الأصل = [] pins.push (obj [i]) ؛ }} ؛ إرجاع دبابيس ؛}/*****احصل على فهرس مؤشر ارتفاع الدبوس الأدنى*/وظيفة getMinHindex (arr ، minh) {for (var i in arr) {if (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] scrolltop = document.documentElement.scrolltop || document.body.scrolltop ؛ // عودة ارتفاع الورق (LastPinh <scrolltop+documenth)؟ صحيح: false ؛الرسم البياني التجريبي:
رمز المصدر تنزيل: //www.vevb.com/jiaoben/452663.html
عنوان العرض التوضيحي: http://demo.vevb.com/js/2016/jswallper/