移动端瀑布流

最新推荐文章于 2022-06-27 07:21:53 发布

夜惊如水

最新推荐文章于 2022-06-27 07:21:53 发布

阅读量1.4k

点赞数

分类专栏： js代码

js代码专栏收录该内容

34 篇文章 2 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }
        #box{
            margin: 0 15px;
            box-sizing: border-box;
            position: relative;
        }
        img {
            width: 100%;
            display: block;
        }
        .item {
            width: 48.5%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="item"><img src="http://img0.imgtn.bdimg.com/it/u=3237972885,1285926145&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
    <div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
</div>
<script>
    var box = document.getElementById('box');
    var items = box.children;
    // 定义每一列之间的间隙 为10像素
    var gap = 10;

    window.onload = function() {
        // 一进来就调用一次
        waterFall();
        // 封装成一个函数
        function waterFall() {
            // 1- 确定列数  = 页面的宽度 / 图片的宽度
            var pageWidth = getClient().width;
            // 图片的大小
            var itemWidth = items[0].offsetWidth;
            // 列数
            var columns = parseInt(pageWidth / (itemWidth + gap));
            var arr = [];
            for (var i = 0; i < items.length; i++) {
                if (i < columns) {
                    // 2- 确定第一行
                    items[i].style.top = 0;
                    items[i].style.left =(itemWidth + gap) * i + 'px';
                    arr.push(items[i].offsetHeight);
                } else {
                    // 其他行
                    // 3- 找到数组中最小高度  和 它的索引
                    var minHeight = arr[0];
                    var index = 0;
                    for (var j = 0; j < arr.length; j++) {
                        if (minHeight > arr[j]) {
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    // 4- 设置下一行的第一个盒子位置
                    // top值就是最小列的高度 + gap
                    items[i].style.top = arr[index] + gap + 'px';
                    // left值就是最小列距离左边的距离
                    items[i].style.left =items[index].offsetLeft + 'px';

                    // 5- 修改最小列的高度
                    // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
                    arr[index] = arr[index] + items[i].offsetHeight + gap;
                }
            }
        }
        // 页面尺寸改变时实时触发
        window.onresize = function() {
            waterFall();
        };
        // 当加载到第30张的时候
        window.onscroll = function() {
            if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
                // 模拟 ajax 获取数据
                var datas = [
                    "http://img0.imgtn.bdimg.com/it/u=3237972885,1285926145&fm=26&gp=0.jpg",
                     "http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg"
                ];
                for (var i = 0; i < datas.length; i++) {
                    var div = document.createElement("div");
                    div.className = "item";
                    div.innerHTML = '<img src="' + datas[i] + '" alt="">';
                    box.appendChild(div);
                }
                waterFall();
            }

        };
    };

    // clientWidth 处理兼容性
    function getClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // scrollTop兼容性处理
    function getScrollTop() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }
</script>
</body>
</html>

夜惊如水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端瀑布流

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
复制链接

扫一扫