前言

        流加载是一种比较酷炫的数据加载方式，它类似分页却又不同于分页，可以随着滚动条的滚动，不断加载数据展现给用户。

        瀑布流是一种比较美观的布局方式，它可以让你不必计较每个div块的高度，自然而然的展现给用户。

相关组件

Blockslt：基于jQuery的瀑布流布局插件。官网

Layui（flow模块+jquery模块）：模块化前端框架。官网

准备工作

        由于我们使用了layui框架，而layui封装了jquery模块，所以我们不需要单独引入jquery，但是需要将blocksit.js进行细微改造。

//原版
(function ($) {
    //blocksit.js核心代码
})(jQuery);

//改造后
layui.use('jquery', function () {
    (function ($) {
        //blocksit.js核心代码
    })(layui.jquery);
});

        OK，如此一来便可以使用blocksit插件了。

进入正题

0.首先引入js文件。

<script src="/layui/layui.js"></script>
<script src="/js/blocksit.js"></script>

1.然后准备一个div容器。

<div id="container" style="position:relative;margin:-8px;"></div>

2.我们需要根据屏幕大小，来确定每列多少个div，以达到响应式的目的。

function col() {
    var width = $(window).width()
        , colNum = 4;

    if (width >= 1200) {
        colNum = 4; //大屏幕 4列
    } else if (width >= 992) {
        colNum = 3; //中屏幕 3列
    } else if (width >= 768) {
        colNum = 2; //小屏幕 2列
    } else {
        colNum = 1; //超小屏幕 1列
    }

    return colNum;
};

3.使用流加载（flow）获取数据并渲染html然后进行瀑布流布局。

flow.load({
    elem: '#container' //指定列表容器
    , done: function (page, next) {
        var lis = [], pageSize = 8;
        //Ajax请求数据
        $.ajax({
            url: '/api/getdata',
            data: { pageSize: pageSize, pageIndex: page },
            success: function (res) {
                if (res.code === 1) {

                    //根据后台响应的数据组织html
                    layui.each(res.data, function (index, item) {
                        var html = '<div class="grid">';
                        html += "自定义内容";
                        html += '</div>';
                        lis.push(html);
                    });

                    //计算总页数
                    var pages = (res.count + pageSize - 1) / pageSize;

                    //将数据渲染在容器中
                    next(lis.join(''), page < pages);

                    //使用blocksit进行瀑布流布局
                    $('#container').BlocksIt({
                        numOfCol: col(),
                        offsetX: 8, 
                        offsetY: 8
                    });
                }
            }
        });
    }
});

4.监听窗口大小改变，进行布局调整。

$(window).resize(function () {
    $('#container').BlocksIt({
        numOfCol: col(),
        offsetX: 8,
        offsetY: 8
    });
});

5.至此，我们已经实现了基本的响应式瀑布流加载效果。

关于以上代码使用的jquery、flow等都是使用的layui模块化加载方式。不懂的请前往layui官网查看文档。

效果预览，请参考本博客：笔记标签