寻梦xunm

Blocksit+Layui实现响应式瀑布流加载
前言流加载是一种比较酷炫的数据加载方式,它类似分页却又不同于分页,可以随着滚动条的滚动,不断加载数据展现给用户。瀑...
扫描右侧二维码阅读全文
04
2019/04

Blocksit+Layui实现响应式瀑布流加载

前言

流加载是一种比较酷炫的数据加载方式,它类似分页却又不同于分页,可以随着滚动条的滚动,不断加载数据展现给用户。
瀑布流是一种比较美观的布局方式,它可以让你不必计较每个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官网查看文档。

Last modification:April 4th, 2019 at 11:45 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment