In diesem Artikel wird die Methode zur Implementierung des Baidu -Wasserfallflusses durch JS beschrieben. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> Imitation Baidu Bild Wasserfallfluss </title> <link rel = "styleSheet" Typ = "text/css" href = "style.css"> <src = "js/js/js/js/js/jquery.min Padding: 0;}#Container {Breite: 1000px; Rand: 1px fest#f00; Margin: 50px Auto; type = "text/javaScript"> $ (function () {var ocontainer = $ ('#container'); var olloader = $ ('#lader'); var iwidth = 200; // Spaltenbreite var ispace = 10; // Anzahl der Spalten var iouterwidth = iwidth+isspace ICELL = 0; ocontainer.css ('width', iouterwidth*icell-pass); IBTN = False Oloader.show (); $ img.attr ('src', obj.preview); var iHeight = iwidth /obj.width * obj.height; var index = getMin (); $ img.appendto (ocontainer); $ img.css ({width: iwidth, Höhe: iHeight}); $ img.css ({top: arrt [index], links: arrl [index]}) arrt [index] += iHeight +10; OLOADER.Hide (); }) iPage ++; iBtn = wahr; })}} $ (Fenster) .on ('Größe', function () {var ioldcell = icell; setCells (); var ih = $ (Fenster) .Scrolltop ()+$ (Fenster) .InnerHeight (); var iminIndex = getMin (); if (ioldcell == icell) return; $ (this) .animate ({top: arrt [index], links: arrl [index]}) arrt [index]+= $ (this) .height () +10; if (arrt [iminIndex]+ocontainer.Offset (). Top <ih) {getData (); var _index = 0; für (var i = 0; i <arrt.length; i ++) {if (arrt [i] <iv) {iv = arrt [i]; _Index = i; }} return _index; }}) </script> <body> <div id = "top"> Imitation Baidu Bild Wasserfallfluss </div> <!-Titel e-> <div id = "container"> </div> <div id = "lader"> </div> <!-Effekt Block E-> </body> </html>> </div> <!Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.