jquery瀑布流实例无限滚动加载图片

基础概念

瀑布流（Waterfall Flow）是一种网页布局方式，它将图片或其他元素以垂直排列的方式展示，每一列的高度可以不同，但宽度一致，形似瀑布流水。无限滚动加载（Infinite Scroll Loading）是一种用户交互设计，当用户滚动到页面底部时，自动加载更多内容。

类型

固定列数瀑布流：预先设定好列数，图片按列填充。
动态列数瀑布流：根据页面宽度动态调整列数。

应用场景

瀑布流布局常用于图片展示网站，如摄影网站、电商网站的商品展示页面等。

实例代码

以下是一个使用jQuery实现瀑布流布局并支持无限滚动加载图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Waterfall with Infinite Scroll</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            margin: -10px;
        }
        .item {
            width: calc(25% - 20px);
            margin: 10px;
            box-sizing: border-box;
        }
        .item img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <!-- Images will be loaded here -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let isLoading = false;
            let page = 1;

            function loadImages() {
                if (isLoading) return;
                isLoading = true;

                $.ajax({
                    url: 'https://api.example.com/images?page=' + page,
                    method: 'GET',
                    success: function(data) {
                        data.forEach(function(image) {
                            $('#container').append('<div class="item"><img src="' + image.url + '" alt="' + image.alt + '"></div>');
                        });

                        isLoading = false;
                        page++;
                    },
                    error: function() {
                        isLoading = false;
                    }
                });
            }

            loadImages();

            $(window).scroll(function() {
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                    loadImages();
                }
            });
        });
    </script>
</body>
</html>