关于javascript:Ajax实现的图片瀑布流超详细的哦

47次阅读

共计 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)
    }
})

满腹经纶,只能实现这点货色(呜呜呜呜 ….),若有过错,还望指出,持续冲啊啊啊啊啊啊!

正文完
 0