jQuery图片瀑布流

时间 2021-01-18 标签瀑布流

很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。

推荐大家看一下瀑布流鼻祖Pinterest的网站，不过好像需要注册......或者就是手机淘宝和京东可以一直下滑显示新的内容之类等等

或者看看我的（图片来源于百度）：

实现方式：

1、传统多列浮动。代表网站蘑菇街和哇哦。

2、用css3实现（貌似是最简单的）

3、绝对定位。代表网站Pinterest。（我也是这样实现的）

需要注意的是，

绝对定位的top=如果为第一行元素，固定高，第一行以后，为当前元素的索引减去每行容纳的元素个数+自身高

绝对定位的left=当前元素和每行容纳的元素个数取余乘以元素的宽

利用滚动条来判断是否需要加载新元素：比较浏览器显示高+滚动条偏移量和所有元素高之间的关系

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片瀑布流</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background-color: rgba(0, 0, 0, 0.534);
        }

        .block {
            position: relative;
            height: 2000px;
            width: 840px;
            margin: 0 auto;
            border: 10px solid red;
        }

        .newdiv {
            position: absolute;
            width: 200px;
            float: left;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px grey;
        }

        .imglist {
            width: 180px;
            margin: 10px 10px;
        }
    </style>
</head>

<body>
    <div class="block">

    </div>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        // 将所有的图片路径存到一个数组中
        var list = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg",
            "12.jpg", "13.jpg", "14.jpg", "15.jpg",
        ];
        // 当滚动条距离完全划完还有30个像素时，重新创建img
        showImg(list);
        $(document).bind('scroll', function () {
            if ($(window).height() + $(this).scrollTop() >= $(document).height() - 30) {
                // console.log(1);
                var newList = [list[Math.floor(Math.random() * list.length)], list[Math.floor(Math.random() *
                    list.length)], list[Math.floor(Math.random() * list.length)], list[Math.floor(Math.random() *
                    list.length)]];
                showImg(newList);
            }
        });

        function showImg(obj) {
            // 创建img元素
            obj.forEach(function (res, index) {
                console.log(index);
                var new_div = $("<div class='newdiv'></div>");
                var img = $("<img class='imglist'>");
                img.attr("src", "./img/" + res);
                new_div.append(img);
                $('.block').append(new_div);
            });
            // 遍历所有容器
            $('.newdiv').each(function (index) {
                if (index < 4) {
                    $('.newdiv').eq(index).css("top", 10);
                    console.log(1);
                } 
                else {
                    $('.newdiv').eq(index).css({
                        "top": $('.newdiv').eq(index - 4)[0].offsetHeight + $('.newdiv').eq(index - 4)[
                            0].offsetTop + 10
                    })
                }
                $('.newdiv').eq(index).css("left", index % 4 * 210);
                // console.log(index);
            });
            $('.block').css("height", $(document).height());
        }
    </script>
</body>

</html>