引入layui ,
前台html页面
<div class="layui-col-md6" style="background-color: #FFFCF4;opacity:0.9;"> <ul class="flow-default layui-timeline" id="LAY_demo2"></ul> </div> js 代码 <script> //JavaScript代码区域 layui.use(['element', 'layer', 'form', 'flow'], function () { var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块 $ = layui.jquery, layer = layui.layer, form = layui.form, flow = layui.flow; //监听导航点击 element.on('nav(demo)', function (elem) { //console.log(elem) layer.msg(elem.text()); }) //手动加载 flow.load({ elem: '#LAY_demo2' //流加载容器 , scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。 , isAuto: false //是否自动加载 , isLazyimg: false //是否开启懒加载 , done: function (page, next) { //加载下一页 //模拟插入 setTimeout(function () { var lis = []; //请求地址 $.get('photolist', {page: page}, function (res) { // console.log(res); layui.each(res.data, function (index, item) { //固定宽高按短边缩放 var src = item.image + "!one", create_time = item.create_time lis.push('<li class="layui-timeline-item" style="display: inline-block;"><i class="layui-icon layui-timeline-axis"></i> <div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">' + create_time + '</h3><p><img style="float: left;margin-right: 10px" src=' + src + '></p></div></li>') }); //分页数小于总页数 next(lis.join(''), page < res.last_page); //从返回值里面获取总的数据 }) }, 500); //反应时间 } }); form.on('submit(*)', function (data) { console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} }); }); </script>