瀑布流布局之百度图片自适应效果

这是通过Javascript来控制瀑布流效果

布局很简单，就是两个div，一个div控制图片显示，一个div用gif图片来显示loading等待

然后调用JQuery库来实现效果

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         
 13         #container {
 14             /*width: 1000px;*/
 15             /*border: 1px solid red;*/
 16             margin: 50px auto;
 17             position: relative;
 18         }
 19         
 20         #container img {
 21             position: absolute;
 22         }
 23         
 24         #loader {
 25             width: 100%;
 26             height: 60px;
 27             background: url("./img/loader.gif") no-repeat center #fff;
 28             position: fixed;
 29             bottom: 0;
 30             left: 0;
 31         }
 32     </style>
 33     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 34 </head>
 35 
 36 <body>
 37     <div id="container"></div>
 38     <div id="loader"></div>
 39 
 40 
 41 
 42     <script>
 43         $(function() {
 44 
 45             //计算列
 46             var oContainer = $("#container");
 47             var oLoader = $("#loader");
 48             var iWidth = 200; //列宽
 49             var iSpace = 10; //间隔宽
 50             var iOuterWidth = iWidth + iSpace; //列实际宽
 51             var iCells = 0; //总列
 52             var sUrl = "http://www.wookmark.com/api/json/popular?callback=?"; //数据地址
 53             var iPage = 0; //当前页数
 54             var arrL = []; //存入left的值
 55             var arrT = []; //存入top的值
 56             var iBtn = true; //
 57 
 58             //算出当前列
 59             function setCells() {
 60                 //总列=(可视区的宽度/实际列宽)然后向下取整
 61                 iCells = Math.floor($(window).innerWidth() / iOuterWidth);
 62                 // 设定列数的最小列和最大列数
 63                 if (iCells < 3) {
 64                     iCells = 3;
 65                 }
 66                 if (iCells > 7) {
 67                     iCells = 7;
 68                 }
 69                 //容器宽度应该等于(列宽*列数-间隔宽)
 70                 oContainer.css("width", iOuterWidth * iCells - iSpace);
 71             }
 72             setCells();
 73 
 74             // 初始化显示数据
 75             for (var i = 0; i < iCells; i++) {
 76                 // 把每张图片的left定位值存入数组
 77                 arrL.push(i * iOuterWidth);
 78                 // 把每张图片的top定位值存入数组
 79                 arrT.push(0);
 80                 // console.log(arrL);
 81             }
 82 
 83             function getData() {
 84 
 85                 if (iBtn) {
 86                     iBtn = false;
 87                     //获取数据之前
 88                     oLoader.show();
 89                     //获取数据
 90                     $.getJSON(sUrl, 'page=' + iPage, function(data) {
 91                         // console.log(data);
 92 
 93                         // 循环数据
 94                         $.each(data, function(index, obj) {
 95                             var oImg = $("<img />");
 96                             oImg.attr('src', obj.preview);
 97                             oContainer.append(oImg);
 98 
 99                             var iHeight = iWidth / obj.width * obj.height;
100 
101                             oImg.css({
102                                 width: iWidth,
103                                 height: iHeight
104                             });
105 
106                             //获取arrT最小值所在的位置
107                             var iMinIndex = getMin();
108 
109                             // 设置定位
110                             oImg.css({
111                                 left: arrL[iMinIndex],
112                                 top: arrT[iMinIndex]
113                             });
114                             arrT[iMinIndex] += iHeight + iSpace;
115                             //获取数据之后
116                             oLoader.hide();
117                             iBtn = true;
118                         });
119 
120                     });
121                 }
122             }
123 
124             getData();
125 
126             //滚动事件
127             $(window).on('scroll', function() {
128                 var iH = $(window).scrollTop() + $(window).innerHeight();
129                 var iMinIndex = getMin();
130                 if (arrT[iMinIndex] + oContainer.offset().top < iH) {
131                     iPage++;
132                     getData();
133                 }
134 
135             });
136 
137             $(window).on('resize', function() {
138 
139                 var iOldCells = iCells;
140                 //计算列数
141                 setCells();
142                 if (iOldCells == iCells) {
143                     return;
144                 }
145 
146                 //清空数组
147                 arrL = [];
148                 arrT = [];
149 
150 
151                 // 初始化显示数据
152                 for (var i = 0; i < iCells; i++) {
153                     // 把每张图片的left定位值存入数组
154                     arrL.push(i * iOuterWidth);
155                     // 把每张图片的top定位值存入数组
156                     arrT.push(0);
157                     // console.log(arrL);
158                 }
159                 //获取容器下的所有图片
160                 var aImgs = oContainer.find('img');
161                 //循环当前图片
162                 aImgs.each(function() {
163                     //获取arrT最小值所在的位置
164                     var iMinIndex = getMin();
165 
166                     // 设置定位
167                     $(this).animate({
168                         left: arrL[iMinIndex],
169                         top: arrT[iMinIndex]
170                     });
171                     arrT[iMinIndex] += $(this).height() + iSpace;
172                 })
173 
174             })
175 
176             function getMin() {
177                 var iv = arrT[0];
178                 var _index = 0;
179 
180                 //通过for循环找出当前arrT里面最小的值,并返回值的序号
181                 for (var i = 1; i < arrT.length; i++) {
182                     if (arrT[i] < iv) {
183                         iv = arrT[i];
184                         _index = i;
185                     }
186                 }
187                 return _index;
188             }
189 
190 
191         });
192     </script>
193 </body>
194 
195 </html>

 

posted @ 2016-12-15 09:48  rookieM  阅读(2927)  评论(0)  编辑  收藏  举报