この記事の例では、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プログラミングに役立つことを願っています。