共计 2546 个字符，预计需要花费 7 分钟才能阅读完成。
所谓瀑布流就是让大小尺寸不同的图片像瀑布一样，整个页面都布满图片
而在 Ajax 中，瀑布流能够说是很常见的，利用瀑布流有限加载技术，勾销了分页按钮，鼠标滑动到底部会主动加载图片
先上一下效果图：
html 构造 和 css 款式
| <head> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| img { | |
| width: 250px; | |
| position: absolute; | |
| display: block; | |
| transition: 0.8s; | |
| } | |
| </style> | |
| <body> | |
| <!-- 页面一上来先加载一些图片 --> | |
| <img src="图片 1" alt=""> | |
| <img src="图片 2" alt=""> | |
| <img src="图片 3" alt=""> | |
| <img src="图片 4" alt=""> | |
| <img src="图片 5" alt=""> | |
| <img src="图片 6" alt=""> | |
| <img src="图片 7" alt=""> | |
| <img src="图片 8" alt=""> | |
| <img src="图片 9" alt=""> | |
| </body> | |
| </head> |
Ajax
这个一个重点就是应用 imgH这个数组来存储每一列的图片高度，高度小的先排列，就会造成瀑布流
| <script src="./server1/public/js/Ajax.js"></script> | |
| <script> | |
| // 页面加载实现就调用 layout 进行布局 | |
| window.onload = layout; | |
| // 窗口扭转也调用函数 | |
| window.onresize = function() {layout(); | |
| } | |
| function layout() { | |
| // 获取全副的图片 | |
| let getImgs = document.querySelectorAll('img'); | |
| // 获取可视区的宽度 | |
| let windowWidth = document.documentElement.clientWidth; | |
| // 计算一行显示多少张图片 | |
| let n = Math.floor(windowWidth / 350); | |
| if (n <= 0) {return} | |
| // 计算页面两侧的空白 | |
| let blankWidth = (windowWidth - n * 250) / 2 | |
| // imgH 用来记录每一列的图片高度 | |
| let imgH = [] | |
| for (let i = 0, n1 = getImgs.length; i < n1; i++) { | |
| // 用来计算是是一行中的第几个 img，给数组作索引 | |
| let j = i % n; | |
| if (imgH.length === n) { | |
| // 从高度低的开始排 | |
| let min = getMin(imgH); | |
| // 左右高低定位，并给一个 20px 的间距 | |
| getImgs[i].style.left = blankWidth + min * 270 + 'px' | |
| getImgs[i].style.top = imgH[min] + 20 + 'px' | |
| // 批改该地位的图片的高度 | |
| imgH[min] = imgH[min] + getImgs[i].offsetHeight + 20 | |
| } else { | |
| // 这个用来排序第一行，把 img 的高度放进数组 | |
| imgH[i] = getImgs[i].offsetHeight + 20; | |
| // 左右定位 | |
| getImgs[i].style.left = blankWidth + j * 270 + 'px'; | |
| getImgs[i].style.top = 20 + 'px'; | |
| } | |
| } | |
| } | |
| // 找出高度最小的图片的索引 | |
| function getMin(arr) { | |
| let m = 0 | |
| for (let i = 0, n = arr.length; i < n; i++) {m = Math.min(arr[m], arr[i]) === arr[m] ? m : i; | |
| } | |
| return m; | |
| } | |
| // j 用来记录 Ajax 申请的次数 | |
| let j = 0 | |
| // 当滚动条滚动时触发函数 | |
| window.onscroll = function() { | |
| // 可视区高度 | |
| let windowHeight = document.documentElement.clientHeight; | |
| // 被卷去的高度 | |
| let windowScroll = document.documentElement.scrollTop || document.documentElement.scrollTop; | |
| // 图片高度 | |
| let imgsHeight = document.documentElement.scrollHeight; | |
| // 判断是否到底部了，是就通过 Ajax 申请发送数据 | |
| if (windowHeight + windowScroll >= imgsHeight - 20) {if (j < 4) { | |
| Ajax({ | |
| url: 'http://127.0.0.1:3000/getImg', | |
| // 将 j 传给服务器端 | |
| data: {num: j}, | |
| success(data) {data = JSON.parse(data) | |
| for (let key in data) { | |
| // 创立图像标签 | |
| let img = document.createElement('img'); | |
| // 绑定标签 | |
| img.src = data[key]; | |
| document.body.appendChild(img) | |
| }; | |
| // 追加新的节点之后从新布局 | |
| layout();} | |
| }); | |
| j++ | |
| } else {layout() | |
| } | |
| }; | |
| }; | |
| </script> |
这里的 j 其实是用来管制Ajax 申请的次数的，这里只进行 4 次申请（没有那么多图片），当然如果你去掉判断条件，就能够实现有限加载啦
这里的服务端比较简单，只是响应图片而已
| app.get('/getImg', function(req, res) {res.setHeader('Access-Control-Allow-Origin', '*'); | |
| // 筹备了 4 个图片库 | |
| imgsUrl1 = {}, | |
| imgsUrl2 = {}, | |
| imgsUrl3 = {}, | |
| imgsUrl4 = {} | |
| // 每次申请发送一个图库 | |
| if (req.query.num === '0') {res.json(imgsUrl1) | |
| } else if (req.query.num === '1') {res.json(imgsUrl2) | |
| } else if (req.query.num === '2') {res.json(imgsUrl3) | |
| } else {res.json(imgsUrl4) | |
| } | |
| }) |
满腹经纶，只能实现这点货色（呜呜呜呜 ….），若有过错，还望指出，持续冲啊啊啊啊啊啊！
正文完
发表至： javascript
2021-04-30
