Este ejemplo de artículo describe el método para implementar el flujo de cascada de Baidu por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Imitation Baidu Picture Waterfall Flow</title><link rel="stylesheet" type="text/css" href="style.css"><script src="js/jquery.min.js"></script><style>*{margin:0; Padding: 0;}#contenedor {ancho: 1000px; border: 1px sólido#f00; margen: 50px automático; posición: relativo;}#contenedor img {posicion: absoluta;}#carger {width: 100%; altura: 60px; fondo: url (carger.gif) sin-red center; posición: fijo; parte inferior: 0; izquierda; izquierda; 0;} type = "text/javaScript"> $ (function () {var ocontainer = $ ('#contenedor'); var oloader = $ ('#loader'); var iwidth = 200; // columna width var ispace = 10; // número de columnas var iouterwidth = iwidth+ispace; var superfici = 'localhost/api/json/popular/popular? icell = 0; Ocontainer.css ('ancho', iouterwidth*icell-aspace); = false oloader.show (); $ img.attr ('src', obj.preview); var iHEight = iWidth /obj.Width * obj.Height; Var index = getmin (); $ img.appendto (ocontainer); $ img.css ({ancho: iWidth, altura: iHeight}); $ img.css ({top: arrt [index], izquierda: arrl [index]}) Arrt [index] += iHeight +10; Oloader.hide (); }) ipage ++; ibtn = verdadero; })}} $ (Window) .on ('en torno a', function () {var ioldcell = icell; setCells (); var ih = $ (Window) .ScrollToP ()+$ (Window) .innerHeight (); var iminindex = getmin (); if (arrt [iminindex]+ocontainer.offset (). <ih () (); if (ioldcell == icell) return; $ (this) .animate ({top: arrt [index], izquierda: arrl [index]}) Art [index]+= $ (this) .Height () +10; if (Arrt [iminIndex]+Ocontainer.OffSet (). Top <ih) {getData (); 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 imagen flujo de cascada </div> <!-title e-> <div id = "contenedor"> </div> <div id = "loader"> </div> <!-Effect Block E-> </boder> </html>Espero que este artículo sea útil para la programación de JavaScript de todos.