layer之layui-row瀑布流加载

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>博客</title>
<jsp:include page="../common.jsp"></jsp:include>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header layui-anim layui-anim-scale">
			<ul class="layui-nav layui-hide-xs">
				<li class="layui-nav-item"><a href="/blog/login">首页</a></li>
				<li class="layui-nav-item"><a href="/blog/login">关于我</a></li>
				<li class="layui-nav-item"><a href="/blog/login">生活</a></li>
				<li class="layui-nav-item"><a href="/blog/login">学无止境</a></li>
				<li class="layui-nav-item"><a href="/blog/login">留言</a></li>
			</ul>
			<ul class="layui-nav layui-hide-sm">
				<li class="layui-nav-item">菜单<a href="javascript:;"></a>
					<dl class="layui-nav-child">
						<dd>
							<a>首页</a>
						</dd>
						<dd>
							<a>关于我</a>
						</dd>
						<dd>
							<a>生活</a>
						</dd>
						<dd>
							<a>学无止境</a>
						</dd>
						<dd>
							<a>留言</a>
						</dd>
					</dl>
				</li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<shiro:user>
					<li class="layui-nav-item"><a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> <span id="curName"></span>
					</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="/blog/index">后台管理</a>
							</dd>
							<dd>
								<a href="/blog/logout">退出</a>
							</dd>
						</dl></li>
				</shiro:user>
				<shiro:guest>
					<li class="layui-nav-item"><a href="/blog/login">登录</a></li>
				</shiro:guest>
			</ul>
		</div>
		<div class="layui-body layui-anim layui-anim-scale" style="left: 0px">
			<div class="layui-container">
				<div class="layui-carousel layui-hide-xs" id="lb" style="margin-top: 15px">
					<div class="layui-form-item" carousel-item="">
						<img src="http://101.200.49.60:8888/group1/M00/00/00/rBFRjFoZr22AULCAAAAhLswIq4c983.jpg" alt=""> <img src="http://101.200.49.60:8888/group1/M00/00/00/rBFRjFoaVRyAPjzeAABKZnDs4Tg276.jpg" alt="" width="245" height="200" title="" align="right">
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-xs12 layui-col-sm6 layui-col-md9" style="padding: 5px">
						<ul id="flows" class="flow-default">
						</ul>
					</div>
					<div class="layui-col-xs12 layui-col-sm6 layui-col-md3" style="padding: 5px">
						<blockquote style="margin-top: 10px; height: 300px" class="layui-elem-quote layui-text">
						 	Layui - 用心与你沟通
						</blockquote>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-footer layui-anim layui-anim-scale" style="text-align: center; left: 0px;">博客</div>
	</div>
</body>
<script type="text/javascript">
	var element;
	var carousel;
	var flow;
	var layer;
	$.ajax({
		url : '/blog/getUserName',
		type : 'post',
		cache : false,
		async : false,
		success : function(res) {
			$("#curName").text(res.nickname);
		}
	});
	layui.define([ 'element', 'carousel', 'flow', 'code' ], function(exports) {
		element = layui.element, carousel = layui.carousel, flow = layui.flow;
		var $ = layui.jquery;
		layui.code();
		carousel.render({
			elem : '#lb',
			interval : 2800,
			anim : 'fade',
			//arrow : 'none',
			width : '100%',
			indicator : "none",
			height : '200px'
		});
		flow.load({
			elem : '#flows',
			scrollElem : '#flows',
			isAuto : false,
			isLazyimg : true,
			done : function(page, next) {
				//模拟插入
				setTimeout(function() {
					var lis = [];
					$.get('/blog/ui/articles?page=' + page + '&limit=2',
							function(res) {
								console.info(res);
								//假设你的列表返回在data集合中
								layui.each(res.data, function(index, item) {
									var str='<div><blockquote class="layui-elem-quote" style="margin-top: 10px;">'+item.articlename+"<font style='margin-left:30px;'>创建时间:"+item.articletime+'</font></blockquote></div>';
									str+='<blockquote class="layui-elem-quote layui-quote-nm layui-text" style="font-size:16px;letter-spacing:2px;line-height:25px;">'+"Layui - 用心与你沟通(content)"+'</blockquote>';
									lis.push('<li>' + str + '</li>');
								});
								next(lis.join(''), page < res.count); //假设总页数为 6
							});
				}, 500);
			}
		});
		element.init();
	});
</script>
</html>



  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值