huanggr
javaScript简称js，主要负责与用户的交互，随着科技的不断发展，js所担任的角色也越来越重要，它不仅仅可以让前后端很好的交互，也可以做出很炫酷的动画来增强用户体验，瀑布流就是让页面看着像瀑布一样，接下来，就让我们一起去看看js中的瀑布流是怎么实现的。
页面中的javascript代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!DOCTYPE HTML> <html> <head> <title>瀑布流加载</title> <meta charset="utf-8"> <meta name="Author" content=""> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type='text/css'> * { margin: 0; padding: 0; } #wrap { width: 837px; margin: 50px auto; box-shadow: 0 0 5px #000; } #wrap ul { overflow: hidden; } #wrap ul li { list-style: none; width: 265px; float: left; } #wrap ul li .detail { font-family: 'Microsoft yahei'; border: 1px solid #ddd; margin-bottom: 20px; display: none; } #wrap ul li .detail img { display: block; } #wrap ul li a.dec { line-height: 25px; padding: 8px 15px; background: #fff; display: block; color: #000; text-decoration: none; } #wrap ul li .time { height: 42px; background: #f1f1f1; border-top: 1px solid #ddd; } #wrap ul li .time p { float: left; line-height: 42px; color: #666; text-indent: 10px; font-size: 12px; } #wrap ul li .time a { float: right; width: 80px; line-height: 42px; text-align: center; color: #666; font-size: 12px; text-decoration: none; border-left: 1px solid #ddd; } #wrap ul li a:hover { color: #b70032; } </style> </head> <body> <div id="wrap"> <ul> <li></li> <li style="margin-left:20px;"></li> <li style="float:right"></li> </ul> </div> <!-- <div class="detail"> <img src="img/1.jpg" width='263' /> <a href="" class="dec">你们男神都爱的倪妮 就是个大写哒美好</a> <div class="time"> <p>2016/03/18 20:08</p> <a href="">阅读全文</a> </div> </div> --> </body> </html> |
javascript代码片断
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <script type="text/javascript"> $(function () { var $li = $('#wrap ul li'); var liLength = $li.length; var $wrap = $('#wrap'); var index = -1; show(10); $(window).scroll(function () { //当前盒子的top值+该盒子的高度-滑条滚动的距离 var bW = $wrap.offset().top + $wrap.height() - $(document).scrollTop(); //当高度小于浏览器窗口的高度的时候，说明超过了 if (bW < $(window).height()) { num = index + 5; show(num); console.log("11"); } }); function show(num) { index++; var oDiv = createDiv(index); var i = getShort(); $li.eq(i).append($(oDiv)); $(oDiv).fadeIn(1000); var oImg = oDiv.getElementsByTagName('img')[0]; oImg.onload = function () { if (index < num) { show(num); } } }; //得到三个li最短的那个的序列号 function getShort() { //假设最短的是第一个；a -> 序列号 ; fH -> 第一个的高度 var a = 0; var fH = $li.eq(0).height(); //循环所有的li for (var i = 1; i < liLength; i++) { //得到对应的li的高度 var nH = $li.eq(i).height(); //如果说该li的高度小于fH; if (nH < fH) { a = i; // 更新最短的序列号 fH = nH; // 更新最短的高度 } } return a; } function createDiv(i) { var oDiv = document.createElement('div'); oDiv.className = 'detail'; var oImg = new Image(); oImg.src = imgData[i].src; oImg.width = '263'; var oA = document.createElement('a'); oA.href = ''; oA.className = 'dec'; oA.innerHTML = imgData[i].dec; var oDiv1 = document.createElement('div'); oDiv1.className = 'time'; var oP = document.createElement('p'); oP.innerHTML = imgData[i].time; var oA1 = document.createElement('a'); oA1.href = ''; oA1.innerHTML = '阅读全文'; oDiv1.appendChild(oP); oDiv1.appendChild(oA1); oDiv.appendChild(oImg); oDiv.appendChild(oA); oDiv.appendChild(oDiv1); return oDiv; } }); </script> |
引用的数据（模拟数据）
1 | <script type="text/javascript" src="./data.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 | window.imgData = [ { src : 'img/1.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/2.jpg', dec : '没有A4腰咋滴 宝宝们有A4脸啊', time : '2016/03/18 18:25', }, { src : 'img/3.jpg', dec : '“包”治百病 呵呵那是说手好看的', time : '2016/03/18 17:09', }, { src : 'img/4.jpg', dec : '睡不好颜值down 别让7个小习惯毁掉女神梦', time : '2016/03/18 11:46', }, { src : 'img/5.jpg', dec : '沙尘天气来袭 需给皮肤做好防护', time : '2016/03/18 11:44', }, { src : 'img/6.jpg', dec : '保湿工作有漏洞 皮肤发出异常警报!', time : '2016/03/18 20:08', }, { src : 'img/7.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/8.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/9.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/10.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/11.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/12.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/13.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/14.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/15.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/16.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/17.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/18.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/19.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/20.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/21.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/22.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/23.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/24.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/25.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/26.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/27.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/28.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/29.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/30.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/31.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/32.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/33.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/34.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/35.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/36.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/37.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/38.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/39.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/40.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/41.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/42.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/43.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/44.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/45.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/46.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/47.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/48.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/49.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', }, { src : 'img/50.jpg', dec : '你们男神都爱的倪妮 就是个大写哒美好', time : '2016/03/18 20:08', } ]; |
7