这是通过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 /* 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 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>