この記事の例では、JSによるBaidu Waterflow Flowを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>模造baidu写真の滝の流れ> <link rel = "styleSheet" type = "text/css" href = "style.css"> <src = "js/jquery.js"> <パディング：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：0; type = "text/javascript"> $（function（）{var ocontainer = $（ '＃container'）; var oloader = $（ '＃loader'）; var iwidth = 200; //列幅var ispace = 10; //列の数var iouterwidth = iwidth+= ispace; var surl = 'call/json/json/json Icell = 0 = 0; ocontainer.css（width '、iouterwidth-setcells（）; 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、height：iheight}）; $ img.css（{top：arrt [index]、left：arrl [index]}）arrt [index] += iheight +10; oloader.hide（）; }）ipage ++; ibtn = true; }）}} $（window）.on（ 'resize'、function（）{var ioldcell = icell = icell; setcels（）; var ih = $（）.scrolltop（）+$（window）.innerheight（）; var iminindex = getmin（）; if（arrt [iminindex]+ocontainer.offset（）; }（ioldcell == return = []; $（this）。 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; }}）</scrip> <body> <div id = "top"> imitation baidu picture waterfall flow </div> <！ - title e-> <div id = "container"> </div> <div id = "loader"> div> <！この記事がみんなのJavaScriptプログラミングに役立つことを願っています。