이 기사 예제는 JS에 의해 Baidu 폭포 흐름을 구현하는 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 모방 Baidu 그림 폭포 흐름 </title> <link rel = "stylesheet"type = "text/css"href = "style.css"> <script src = "js/jquery.min.js"> </script> <style> <style> < 패딩 : 0;}#컨테이너 {너비 : 1000px; 테두리 : 1px 고체#f00; 마진 : 50px 자동; 위치 : 상대;}#컨테이너 img {위치 : 절대;}#width : 100%; 높이 : 60px; 배경 : URL (로더. 0;} </style> </head> <script type = "text/javaScript"> $ (function () {var ocontainer = $ ( '#컨테이너'); var oloader = $ ( '#loader'); var iwidth = 200; // 열 var ispace = 10; // var iouterwidth = iwidth+var surl; 'localhost/api/json/popular?callback=?'; var iCell=0; var iPage=0; var arrL=[]; var arrT=[]; var iBtn=true; function setCells(){ iCell= Math.floor($(window).innerWidth()/iOuterWidth); if(iCell < 3){ iCell =3; } if(iCell >6){ iCell = 6; ocsss (var i = 0; i <icell; i ++); if (ibtn) {ibtn = false oloader.show (); 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 ({너비 : iwidth, 높이 : iheight}); $ img.css ({top : arrt [index], 왼쪽 : arrl [index]}) arrt [index] += iheight +10; oloader.hide (); }) iPage ++; ibtn = true; })}} $ (창) .on ( 'resize', function () {var ioldcell = icell; setcells (); var ih = $ (wind if (ioldcell == ICELL); $ (이) 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> <bod> <div id = "top"> 모방 바이두 그림 폭포 흐름 </div> <!-제목 E-> <div id = "컨테이너"> </div> <div id = "로더"> </div> <!-효과 블록 e-> </body> </html>이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.