jquery 下拉加载+ 瀑布流

实现jquery下拉加载和瀑布流的步骤如下：

1. 引入jquery库和瀑布流插件masonry。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

2. 创建一个包含内容的容器。

<div id="content">
    <!-- 内容项 -->
</div>

3. 使用ajax获取数据。

var page = 1; // 默认第一页
var isLoading = false; // 是否正在加载中

function getData() {
    if (isLoading) return; // 如果已经在加载中，则不进行请求
    isLoading = true; // 设置为正在加载中

    $.ajax({
        type: 'GET',
        url: 'your-api-url',
        data: { page: page },
        success: function(res) {
            // 成功获取数据后，page数加一，isLoading设为false
            page++;
            isLoading = false;
            // 处理数据并渲染页面
            render(res.data);
        },
        error: function() {
            isLoading = false;
            console.log('请求失败');
        }
    });
}

4. 渲染数据并使用瀑布流布局。

function render(data) {
    var content = $('#content');
    var html = '';

    // 遍历数据，生成对应的 HTML 代码
    for (var i = 0; i < data.length; i++) {
        html += '<div class="item">' + data[i].title + '</div>';
    }

    // 将 HTML 插入到容器中
    content.append(html);

    // 使用瀑布流布局
    content.imagesLoaded(function() {
        content.masonry({
            itemSelector: '.item',
            columnWidth: 240, // 每列的宽度
            gutter: 20 // 列与列之间的距离
        });
    });
}

5. 监听滚动事件，当滚动到底部时触发加载更多数据的函数。

$(window).scroll(function() {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        getData();
    }
});

这样就可以实现jquery下拉加载和瀑布流效果了。