最近在研究页面展示方式，以往千篇一律的表格展示，有些单调，偶尔机会了解到Layui flow,看看官方文档用着还是比较简单的，一下是范例，仅供参考：

1.引入样式文件：

<link href="../css/lib/bootstrap/bootstrap.css?v=3.3.7" rel="stylesheet">
<link href="../css/lib/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../css/app/main.css" rel="stylesheet">
<link href="../css/lib/animate.css" rel="stylesheet">
<link href="../js/lib/layer/skin/layer.css" rel="stylesheet">
<link href="../js/lib/layui/css/layui.css" rel="stylesheet">

其中，layui.css为必须文件，其他可酌情忽略

2.引入相关js:

<script type="text/javascript" src="../js/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/lib/layer/layer.min.js"></script>
<script type="text/javascript" src="../js/lib/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/app/util.js"></script>
<script type="text/javascript" src="../js/app/j-extend.js"></script>
<script type="text/javascript" src="../js/lib/layui/layui.all.js"></script>
<script src="../js/app/constant.js"></script>
<script type="text/javascript" src="../js/app/sys/sysAccount.js"></script>

其中.jquery和layui.all.js为必备文件，其他可酌情忽略，注意先后顺序

3.HTML代码（仅显示相关代码）：

<div id="show"></div>

定义div，作为流展示容器

4.脚本代码（仅显示相关代码）

function loadData() {var flow = layui.flow;flow.load({elem: '#show',//容器IDisAuto: true,//是否自动加载下一页，默认true,反之，需要手动点击“加载更多”end: "<p class='text-disabled'>没有更多了</p>",//全部加载后的显示文档，支持HTML标记done: function (page, next) {var lis = [];
//自己封装的标准的$.AJAX请求new R('/systemManage/listUser').post({page: page,//以下三项是过滤条件username: jval("#kw"),delFlag: jval("#accountStatus")}, function (res) {var result = res.data;var i = 0;var content = "";while (i < result.data.length) {//根据图片的状态，显示不同的图片样式var item = result.data[i];var textClass = "text-danger";var photoClass = "disabled";var btnClass = "fa fa-check";var enableBtnText = "启用";if (item.delFlag === 0) {textClass = "text-success";photoClass = "";btnClass = "fa fa-remove";enableBtnText = "禁用";}//使索引不受分页影响var index = i + (page - 1) * result.index;content ="<div class='col-md-2 table-bordered' οnmοuseοver='setBottomTipShow(\"" + index + "\")' οnmοuseοut='setBottomTipHidden(\"" + index + "\")'>" +"<p class='topTip " + textClass + " font-bold'>" +item.username +"</p>" +"<img src='" + result.prefix + item.photo + "' class='" + photoClass + "'>" +"<p class='accountCard animated slideInUp hidden text-right h4' id='tip" + index + "'>" +"<i class='btn btn-success fa fa-pencil-square' title='" + SysUser.userList_edit_button + "'>" +"</i>" +"<i class='btn btn-success mgn-left3px " + btnClass + "' title='" + enableBtnText + "'>" +"</i>" +"<i class='btn btn-success mgn-left3px fa fa-refresh' title='" + SysUser.userList_reset_button + "'>" +"</i>" +"</p>" +"</div>";lis.push(content);i++;}next(lis.join(''), page < result.total);})}});
}

单独放在方法里，为了重复使用，这个大部分都是官方范例的固定写法。

5.1控制器

@PostMapping("/listUser")
@ApiOperation(value = "listUser", notes = "加载用户列表信息")
@ResponseBody
public Object listUser(LayFlowDto layFlowDto) {ResultView<Map<String,Object>> mapResultView=sysUserService.getUserList(layFlowDto);return mapResultView;
}

5.2服务实现类

@Override
public ResultView<Map<String, Object>> getUserList(LayFlowDto layFlowDto) {ResultView<Map<String, Object>> listResultView = new ResultView<>();if (layFlowDto != null) {
//注意此处计算每页的起始位置，当然可以借助pageHelperlayFlowDto.setLimitStart(layFlowDto.getLimitEnd() * layFlowDto.getPage() - layFlowDto.getLimitEnd());SysUser sysUser = layFlowDto.copy();SysUserExample sysUserExample = new SysUserExample();SysUserExample.Criteria criteria = sysUserExample.createCriteria();sysUserExample.setLimitStart(layFlowDto.getLimitStart());sysUserExample.setLimitEnd(layFlowDto.getLimitEnd());if (!StringUtils.isEmpty(sysUser.getUsername())) {criteria.andUsernameLike(sysUser.getUsername());}if (!StringUtils.isEmpty(sysUser.getDelFlag())) {criteria.andDelFlagEqualTo(sysUser.getDelFlag());}sysUserExample.setOrderByClause("username ASC,del_flag ASC");List<SysUser> userList = sysUserMapper.selectByExample(sysUserExample);int count = sysUserMapper.countByExample(sysUserExample);if (BaseUtils.CollectionUtils.isValidList(userList)) {Map<String, Object> data = new HashMap<>();data.put("prefix", photoUrl + photoPath);
//这个是必须的，前段用于计算是否有下一页，在前段只有page<total时候，才会产生下一页，要用到 Math.ceil这个函数，不要用Math.round，有不了解的，查看MATH APIdata.put("total", Math.ceil(new Double(count) / new Double(layFlowDto.getLimitEnd())));data.put("data", userList);
//这个非必须，如果你不需要每一页的精确索引data.put("index", layFlowDto.getLimitEnd());listResultView.setData(data);listResultView.setSuccess();}}return listResultView;
}

5.3 参数类

@Data
public class LayFlowDto extends SysUserDto {private int page = 1;//当前页，必填参数private int limitEnd = 24;//每页显示数量private int limitStart = 0;//起始索引页@Overridepublic String toString() {return "LayFlowDto{" +"page=" + page +", limitStart=" + limitStart +", limitEnd=" + limitEnd +'}';}
}

SysUserDto 类没什么，只是为了进行筛选而已

6.条件筛选

$("#searchBtn").on("click", function () {$("#show").empty();//清除原有的节点数据，不要用.remove()loadData();//重新加载
})

最终效果：