H5、jquery实现滚动加载下一页+瀑布流布局

效果如图：

 

需求描述：图片不固定高度，滑动到底部加载下一页数据。

瀑布流插件：

1、masonry.pkgd.js，官网地址

2、判断图片是否加载成功：imagesloaded.pkgd.js，官网地址，（坑：5.0.0的版本有问题，代码会报错）

加载下一页插件： dropload.js,githup上2.6+k的star

html代码：

<div class="floor3-con grid">
    <!-- 瀑布流内容放这 -->
</div>

js代码：

<script>
    var page = 0; // 当前页
    var totalPage = 3 // 总页数
    // 监听是否到底了
    $('#floor3').dropload({
        scrollArea : window, // 滚动区域
        // distance : 200,
        threshold : 50,
        domDown : { // 自定义加载下一页样式
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多数据啦~</div>'
        },
        loadDownFn : function(me){ // 触底了的话会自动触发这个方法
            if(page<totalPage) {
                page++;
                console.log('触底了加载下一页',page)
                // 拼接HTML
                var result = '';
                // 模拟接口请求
                setTimeout(function(){
                    // 不能提前在html中显示节点，会导致APP不触发加载下一页
                    var tempStr =`
                    <div class="item grid-item">
                        <div class="item-box">
                            <div class="img-box relative">
                                <img class="lazy" src="./images/6.png"/>
                            </div>
                            <div class="item-con">
                                <p class="title">标题标题标题标</p>
                            </div>
                        </div>
                    </div>
                    <div class="item grid-item">
                        <div class="item-box">
                            <div class="img-box relative">
                                <img class="lazy" src="./images/4.png"/>
                            </div>
                            <div class="item-con">
                                <p class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
                            </div>
                        </div>
                    </div>
                    <div class="item grid-item">
                        <div class="item-box">
                            <div class="img-box relative">
                                <img class="lazy" src="./images/1.png">
                            </div>
                            <div class="item-con">
                                <p class="title">标题标题标题标题标题标题</p>
                                <div class="goods-info">
                                    <div class="left">
                                        <img class="lazy" src="./images/goods.jpg" alt="">
                                    </div>
                                    <div class="right">
                                        <p class="title2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
                                        <div class="price-box">
                                            <span class="unit">￥</span>
                                            <span class="amount">399</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item grid-item"">
                        <div class="item-box">
                            <div class="img-box relative">
                                <img class="lazy" src="./images/2.png" alt="">
                            </div>
                            <div class="item-con">
                                <p class="title">哈哈哈哈哈哈哈哈哈哈</p>
                                <div class="goods-info">
                                    <div class="left">
                                        <img class="lazy" src="./images/goods.jpg" alt="">
                                    </div>
                                    <div class="right">
                                        <p class="title2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
                                        <div class="price-box">
                                            <span class="unit">￥</span>
                                            <span class="amount">399</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item grid-item">
                        <div class="item-box">
                            <div class="img-box relative">
                                <img class="lazy" src="./images/5.png">
                            </div>
                            <div class="item-con">
                                <p class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
                            </div>
                        </div>
                    </div>
                    `
                    var $items = $(tempStr)
                    var $grid = $('.grid').masonry({
                        itemSelector: '.grid-item',
                        transitionDuration:'0s',
                        // percentPosition: true
                    });
                    // 这里不能简单的使用jquery的append方法去追加节点，那样瀑布流会计算失败
                    //新追加的节点利用masonry布局瀑布流
                    $grid.append($items).masonry('appended',$items)
                    $grid.imagesLoaded().done(function() { // 图片加载成功后再布局
                        console.log('图片加载成功')
                        $('.grid-item').css({
                            'opacity':1
                        })
                        $grid.masonry('layout')
                    })
                    me.noData(false)
                    // 每次数据插入，必须重置
                    me.resetload();
                    
                },1000)
            } else { // 最后一页了
                console.log('最后一页了')
                //锁定
                me.lock();
                // 展示暂无更多数据样式
                me.noData();
                // 每次数据变更，必须重置
                me.resetload();
            }
        }
    });
</script>

demo代码(包括masonry、imagesloaded、dropload)：demo代码