يصف مثال المقالة طريقة تنفيذ تدفق شلال BAIDU بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> تقليد Paidu Picture Fall Fall Flow </itlem> <link rel = "STYLESHEET" type = "text/css" href = "style.css"> <lript src = "js/jquery.min.js" Padding: 0 ؛}#Container {Width: 1000px ؛ الحدود: 1px Solid#F00 ؛ الهامش: 50px Auto ؛ الموضع: relative ؛}#Container IMG {position: absolute ؛}#loader {width: 100 ٪ ؛ leight: 60px ؛ background: url (loader.gif) no-repeat center ؛ position: 0 ؛ 0 ؛ 0 ؛} </style> </head> <script type = "text/javaScript"> $ (function () {var ocontainer = $ ('#container') ؛ var oloader = $ ('#loader') ؛ var iwidth = 200 ؛ " ell = 6 ؛ if (ibtn) {ibtn = false oloader.show () ؛ $ img.attr ('src' ، obj.preview) ؛ var iheight = iwidth /Obj.width * obj.height ؛ var index = getMin () ؛ $ img.appendto (Ocontainer) ؛ $ img.css ({العرض: iwidth ، الارتفاع: iheight}) ؛ $ img.css ({top: arrt [index] ، left: arrl [index]}) arrt [index] += iHeight +10 ؛ oloader.hide () ؛ }) ipage ++ ؛ IBTN = صحيح ؛ })}} $ (window) .on ('تغيير حجم' ، الدالة () {var ioldcell = icell ؛ setCells () ؛ var ih = $ (window) .scrolltop ()+$ (window) .innerheight () ؛ var iminindex = getMin () ؛ if (arrt إذا كانت (eLdcell) إرجاعًا ؛ $ (this) .animate ({TOP: ARRT [index] ، reft: arrl [index]}) arrt [index]+= $ (this) .height () +10 ؛ if (arrt [iminindex]+ocontainer.offset (). top <ih) {getData () ؛ var _index = 0 ؛ لـ (var i = 0 ؛ i <arrt.length ؛ i ++) {if (arrt [i] <iv) {iv = arrt [i] ؛ _index = i ؛ }} return _index ؛ }}) </script> <body> <div id = "top"> تقليد تدفق شلال صورة Baidu </div> <!-title e-> <div id = "container"> </div> <div id = "loader"> </div> <!-effect block e-> </html>آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.