Este exemplo de artigo descreve o método de implementação do fluxo em cascata do Baidu por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> imitação Baidu Picture Waterfall Flow </ititle> <link rel = "Stylesheet" type = "text/css" href = "style.css"> <script src = "js/jQuery.min.min. preenchimento: 0;}#contêiner {width: 1000px; borda: 1px Solid#f00; margem: 50px Auto; posição: relativa;}#contêiner img {position: absoluto;}#carregador {width: 100%; altura: 60px; background: url (carregador.gif) não-ri; type = "text/javascript"> $ (function () {var oContainer = $ ('#contêiner'); var oloader = $ ('#carregador'); var iwidth = 200; // largura da coluna var ispace = 10; // número de colunas var iouterWIdth = iwidth+ispace; O IPAGE DE Ocontainer.css ('largura', iouterwidth*icell-psace); 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, altura: iHeight}); $ img.css ({top: arrt [index], esquerda: arrl [index]}) arrt [index] += iHeight +10; Oloader.hide (); }) ipage ++; ibtn = true; })}} $ (janela) .on ('redimensionar', function () {var ioldCell = icell; setCells (); var ih = $ (window) .scrolltop ()+$ (window) .innerHeight (); var iminindex = getMin (); if (ARTRT [iMIMIndex] if (ioldCell == ICELL) RETORNO; isto. 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; }} retornar _index; }}) </script> <body> <div id = "top"> imitação Baidu Picture Waterfall Flow </div> <!-Título e-> <div id = "contêiner"> </div> <div id = "carregador"> </div> <!-Bloco de efeito e-> </body> </html>Espero que este artigo seja útil para a programação JavaScript de todos.