Contoh artikel ini menjelaskan metode penerapan aliran air terjun Baidu oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Imitasi Baidu Picture Waterfall Flow </title> <link rel = "stylesheet" type = "text/css" href = "style.css"> <script src = "js/jQin. padding: 0;}#container {width: 1000px; border: 1px solid#f00; margin: 50px auto; posisi: relatif;}#container img {posisi: absolute;}#loader {width: 100%; tinggi: 60px; latar belakang: url (loader.gif) no-repeat center; type = "Text/JavaScript"> $ (function () {var ocontainer = $ ('#container'); var oloader = $ ('#loader'); var iwidth = 200; // Lebar kolom var ispace = 10; // Jumlah kolom var iouterwidth = iWidth+iSpace; var Surl = '; icell = var ipage = 0; ocontainer.css ('lebar', iouterwidth*icell-ispace);} setCells (); iBTN = false oloader.show (); $ .getjson (surl, 'page ='+ipage, function (data) {$ .each (data, function (i, obj) {var $ img = $ ('<mmg>'); $ img.attr ('src', obj.preview); var iheight = iwidth /obj.width * obj.height; indeks var = getmin (); $ img.Appendto (Ocontainer); $ img.css ({lebar: iwidth, tinggi: iheight}); $ img.css ({top: arrt [index], kiri: arrl [index]}) arrt [index] += iheight +10; oloader.hide (); }) iPage ++; iBtn = true; })}} $ (window) .on ('ubah ukuran', function () {var ioldcell = icell; setCells (); var ih = $ (window) .scrolltop ()+$ (window) .innerheight (); var iminindex = getmin (); if (arrt [iminindex]). } if (ioldcell == ICell) kembali; $ (ini) .animate ({top: arrt [index], kiri: arrl [index]}) arrt [index]+= $ (this) .height () +10; if (arrt [iminIndex]+ocontainer.offset (). Top <ih) {getData (); var _index = 0; untuk (var i = 0; i <arrt.length; i ++) {if (arrt [i] <iv) {iv = arrt [i]; _index = i; }} return _index; }}) </script> <body> <v id = "top"> imitasi Baidu Picture Waterfall Flow </div> <!-Title E-> <Div ID = "Container"> </Div> <Div ID = "Loader"> </Div> <!-Efek Blok E-> </div> </html>Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.