jquery瀑布流滚动加载图片

基础概念：瀑布流布局是一种页面布局方式，它将页面元素按照不同列进行排列，使得每一列的高度尽可能相近，形似瀑布。当用户滚动页面时，会动态加载更多的图片或其他内容，这种技术被称为滚动加载或无限滚动。

优势：

提供流畅的用户体验，用户无需翻页即可查看更多内容。
节省服务器资源，因为只在需要时才加载内容。
可以提高页面的参与度，因为用户更倾向于滚动查看更多内容。

类型：

基于列的瀑布流：内容按照固定数量的列进行排列。
基于行的瀑布流：内容按照固定数量的行进行排列，较少见。

应用场景：

图片分享网站
社交媒体动态展示
新闻网站的文章列表
电商网站的产品展示

遇到的问题及原因：

图片加载错位：由于图片尺寸未知，加载时可能导致布局错位。
性能问题：大量图片同时加载可能导致页面卡顿。
滚动加载不流畅：用户滚动时可能感觉到卡顿或加载延迟。

解决方案：

图片加载错位：
- 使用占位符预设图片尺寸。
- 图片加载完成后重新计算布局。

$(window).on('load', function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() {
        $container.masonry('layout');
    });
});

性能问题：
- 使用懒加载技术，只加载可视区域内的图片。
- 图片压缩和优化，减少文件大小。

$('.lazy').lazyload({
    effect : "fadeIn"
});

滚动加载不流畅：
- 使用节流函数控制滚动事件的触发频率。
- 异步加载数据，避免阻塞主线程。

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

$(window).scroll(throttle(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreContent();
    }
}, 200));

示例代码：以下是一个简单的jQuery瀑布流滚动加载图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流滚动加载</title>
    <style>
        #masonry {
            column-count: 3;
            column-gap: 1em;
        }
        .item {
            break-inside: avoid;
            margin-bottom: 1em;
        }
        .item img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="masonry">
        <!-- 图片项将通过JavaScript动态添加 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
    <script>
        let page = 1;
        function loadMoreContent() {
            $.ajax({
                url: 'get_images.php', // 假设这是获取图片数据的API
                data: { page: page },
                success: function(data) {
                    data.forEach(function(imgSrc) {
                        $('#masonry').append(`<div class="item"><img class="lazy" data-original="${imgSrc}"></div>`);
                    });
                    page++;
                    $('.lazy').lazyload();
                }
            });
        }

        $(window).on('load', function() {
            loadMoreContent();
            $(window).scroll(throttle(function() {
                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                    loadMoreContent();
                }
            }, 200));
        });
    </script>
</body>
</html>

在这个示例中，我们使用了jQuery和懒加载插件来实现瀑布流滚动加载图片的功能。通过AJAX请求获取图片数据，并在页面滚动到底部时动态加载更多内容。