ตัวอย่างบทความนี้อธิบายวิธีการใช้การไหลของน้ำตก Baidu โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การเลียนแบบ Baidu ภาพน้ำตกไหล </title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script src = "js/jquery.min.min.min.min.min Padding: 0;}#container {width: 1000px; border: 1px solid#f00; margin: 50px auto; ตำแหน่ง: สัมพัทธ์;}#container img {ตำแหน่ง: สัมบูรณ์;}#loader {width: 100%; ความสูง: 60px; type = "text/javascript"> $ (function () {var ocontainer = $ ('#container'); var oloader = $ ('#loader'); var iwidth = 200; // ความกว้างของคอลัมน์ var ispace = 10; icell = 0; ocontainer.css ('width', iouterwidth*icell-iSpace);} setcells (); IBTN = FALSE OLOADER.SHOW (); $ .GETJSON (surl, 'page ='+ipage, ฟังก์ชั่น (ข้อมูล) {$ .Each (ข้อมูล, ฟังก์ชั่น (i, obj) {var $ img = $ ('<img>'); $ img.attr ('src', obj.preview); var iheight = iwidth /obj.width * obj.height; ดัชนี var = getMin (); $ img.appendto (ocontainer); $ img.css ({width: iwidth, ความสูง: iheight}); $ img.css ({top: arrt [ดัชนี], ซ้าย: arrl [index]}) arrt [index] += iheight +10; oloader.hide (); }) ipage ++; ibtn = true; })}} $ (หน้าต่าง) .on ('resize', function () {var ioldcell = icell; setcells (); var ih = $ (หน้าต่าง) .scrolltop ()+$ (หน้าต่าง) .innerHeight (); } if (ioldcell == icell) return; $ (นี้) .animate ({top: arrt [index], ซ้าย: arrl [index]}) arrt [index]+= $ (นี่) .Height () +10; if (arrt [iminindex]+ocontainer.offset (). top <ih) {getData (); var _index = 0; สำหรับ (var i = 0; i <arrt.length; i ++) {ถ้า (arrt [i] <iv) {iv = arrt [i]; _index = i; }} return _index; }}) </script> <body> <div id = "top"> การเลียนแบบ Baidu Picture Waterfall Flow </div> <!-title e-> <div id = "container"> </div> <div id = "loader"> </div> <!ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน