Cet exemple d'article décrit la méthode de mise en œuvre de l'écoulement de la cascade de Baidu par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> imitation baidu image castall flow </ title> <link rel = "stylesheet" type = "text / csss" href = "style.css"> <script src = "js / jQuery.min.js"> </ script> padding:0;}#container{width: 1000px;border:1px solid #f00;margin: 50px auto;position: relative;}#container img{position: absolute;}#loader{width: 100%;height: 60px;background: url(loader.gif) no-repeat center;position: fixed;bottom: 0;left: 0;} </ style> </ head> <script type = "text / javaScript"> $ (function () {var oConTainer = $ ('# contener'); var oloader = $ ('# loder'); var iwidth = 200; // width colum 'LocalHost / API / JSON? ell = 6;} oontainer.css ('width', iouterwidth * icell-ispace);} setCells (); if (iBtn) {iBtn = false oloader.show (); $ .getjson (Surl, 'page =' + ipage, function (data) {$ .each (data, function (i, obj) {var $ img = $ ('<img>'); $ img.attr ('src', obj.preview); var iheight = iwidth /obj.width * obj.height; var index = getmin (); $ IMG.APPENDTO (OCONTAINER); $ img.css ({width: iwidth, hauteur: iheight}); $ img.css ({top: arrt [index], gauche: arrl [index]}) arrt [index] + = iheight +10; oloader.hide (); }) ipage ++; iBtn = true; })}} $ (window) .on ('redimensi', function () {var ioldcell = icell; setCells (); var ih = $ (window) .scrolltop () + $ (window) .innerHeight (); var iminindex = getmin (); if (art [iminindex] + ocontainer.offset ().). if (ioldcell ==) Retour; $ (this) .animate ({top: arrt [index], gauche: arrl [index]}) arrt [index] + = $ (this) .height () +10;})}) $ (window) .on ('scroll', function () {var ih = $ (window). if (arrt [iminIndex] + oontainer.offset (). top <ih) {getData ();}}) getmin () {var iv = arrt [0]; var _index = 0; for (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 image waterfall flow </div> <! - title e -> <div id = "contener"> </div> <div id = "loder"> </ div> <! - Effect Block e -> </ body> </html>J'espère que cet article sera utile à la programmation JavaScript de tous.