流加载是一种比较酷炫的数据加载方式,它类似分页却又不同于分页,可以随着滚动条的滚动,不断加载数据展现给用户。
瀑布流是一种比较美观的布局方式,它可以让你不必计较每个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官网查看文档。
效果预览,请参考本博客:笔记标签
版权声明:本文由不落阁原创出品,转载请注明出处!
广告位
跟不落阁,学DOTNET!
广告位
暂时没有任何数据
2018-05-27 08:50回复