首页 学海无涯 Web前端 Blocksit+Layui实现响应式瀑布流加载
Blocksit+Layui实现响应式瀑布流加载
摘要 流加载?瀑布流?响应式?没错,本篇文章将教你如何使用layui的flow(流加载)模块加上jquery瀑布流布局插件Blocksit.js来实现一个响应式的瀑布流加载。

前言

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

        瀑布流是一种比较美观的布局方式,它可以让你不必计较每个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官网查看文档


效果预览,请参考本博客:笔记标签


版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/35

来说两句吧
最新评论
  • 滥好人
    滥好人
    可以[good]

    对不起的表情
    对不起的表情 回复 滥好人 我也觉得不错

    2018-06-05 10:44回复

    刘杰⭐️
    刘杰⭐️ 回复 对不起的表情 对 是挺不错 鼓掌 👏

    2018-06-13 15:22回复

    Adolph~l
    Adolph~l 回复 对不起的表情 厉害了

    2018-10-14 20:52回复

    Null
    Null 回复 对不起的表情 1111111111

    2018-11-24 16:14回复

    Null
    Null 回复 Adolph~l 222222222

    2018-11-24 16:15回复

  • 上单孤儿狗
    上单孤儿狗
    1

    开始打斗
    开始打斗 回复 上单孤儿狗 2

    2018-07-15 22:23回复

  • 简简淡淡
    简简淡淡
    666
  • 开始打斗
    开始打斗
    好文
  • . . /乱世
    . . /乱世
    [ok],至少一个字!
  • 放下
    放下
    [good]

    放下
    放下 回复 放下 ??

    2019-01-20 11:01回复