js实战之-瀑布流

  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>
一个不敬业的前端攻城狮
相关阅读:
es6-compact-table 名词备忘
 JS 防抖和节流函数
 为什么 JS 对象内部属性遍历的顺序乱了
 JS 发送 HTTP 请求方法封装
 JS 一些位操作的妙用
 JS 格式化时间
 linux ssh连接
 c# checked 和 unchecked
c# mvc action 跳转方式
 IIS 动态与静态压缩
原文地址：https://www.cnblogs.com/chaoming/p/3198642.html