這是通過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>