1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 * {margin: 0; padding: 0;} 8 #container { border: 1px solid red; position: relative; margin: 50px auto 0; zoom:1 } 9 #container img { position: absolute; } 10 11 #loader { width: 100%; height: 60px; background: url('loader.gif') no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; } 12 </style> 13 <script src="jquery-1.9.1.min.js"></script> 14 <script> 15 /* 16 固定列：浮动布局 17 定位 18 */ 19 $(function(){ 20 var oBox=$("#container"); 21 22 var icell=0; 23 var imgWidth=200; 24 var mWidth=10; 25 var ipage=0; 26 var zWidth=imgWidth+mWidth; 27 var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?'; 28 var arrT=[]; 29 var arrL=[]; 30 var iBtn=true; 31 32 setimg(); 33 function setimg(){ 34 var winW=$(window).innerWidth(); 35 icell=Math.floor(winW/zWidth); 36 oBox.css("width",icell*zWidth); 37 38 } 39 40 for(var i=0;i<icell;i++){ 41 arrT[i]=0; 42 arrL[i]=zWidth*i; 43 } 44 45 setData(); 46 47 48 49 $(window).on("scroll",function(){ 50 51 var _index=minImg(); 52 var Hi=$(window).scrollTop()+$(window).innerHeight(); 53 if(arrT[_index]+50<Hi){ 54 55 setData(); 56 } 57 58 }) 59 $(window).on("resize",function(){ 60 var iLen=icell; 61 setimg(); 62 if(iLen==icell){return} 63 arrT=[]; 64 arrL=[]; 65 for(var i=0;i<icell;i++){ 66 arrT[i]=0; 67 arrL[i]=zWidth*i; 68 } 69 70 oBox.find("img").each(function(){ 71 var _index=minImg(); 72 $(this).animate({ 73 top:arrT[_index], 74 left:arrL[_index] 75 },1000); 76 arrT[_index]+=$(this).height()+10; 77 78 79 }) 80 81 82 }) 83 84 85 86 87 function setData(){ 88 // alert(1); 89 if(!iBtn){ return} 90 ipage+=1; 91 iBtn=false; 92 93 $.getJSON(sUrl,{page:ipage},function(sdata){ 94 $('#loader').show(); 95 96 $.each(sdata,function(index,obj){ 97 var oImg=$("<img />"); 98 var iHeight=obj.width*imgWidth/obj.height; 99 oImg.css({ 100 imgWidth, 101 height:iHeight 102 }); 103 var _index=minImg(); 104 oImg.css({ 105 top:arrT[_index], 106 left:arrL[_index] 107 }); 108 arrT[_index]+=iHeight+10; 109 oBox.append(oImg); 110 var objImg=new Image(); 111 objImg.onload=function(){ 112 113 oImg.attr("src",this.src); 114 115 } 116 objImg.src = obj.preview; 117 118 119 setTimeout(function(){ 120 121 $('#loader').hide(); 122 },1000); 123 124 iBtn=true; 125 126 }); 127 var x=minImg(); 128 var Hi=$(window).scrollTop()+$(window).innerHeight(); 129 if(arrT[x]+50<Hi){ 130 131 setData(); 132 133 } 134 135 }); 136 137 138 } 139 140 function minImg(){ 141 142 var v=arrT[0]; 143 var _index=0; 144 for(var i=0;i<arrT.length;i++){ 145 146 if(arrT[i]<v){ 147 v=arrT[i]; 148 _index=i; 149 } 150 151 } 152 return _index; 153 } 154 155 156 157 }) 158 159 160 </script> 161 </head> 162 163 <body> 164 <div id="container"></div> 165 <div id="loader"></div> 166 </body> 167 </html>