懒加载（模版引擎+ajax工具+jq）

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	.item {
		width: 640px;
		/* height: 452px; */
		background-color: #eee;
		margin-top: 50px;
		border-radius: 5px;
		overflow: hidden;
	}
	
	.item .cover {
		display: block;
	}
	
	.item .cover img {
		display: block;
	}
	
	.item .bottom {
		height: 35px;
		position: relative;
	}
	
	.item .bottom a {
		text-decoration: none;
		line-height: 35px;
		font-family: '微软雅黑';
		margin-left: 20px;
		color: gray;
	}
	
	.item .bottom .rightBox {
		position: absolute;
		top: 0px;
		right: 0px;
		height: 100%;
	}
	
	.item .bottom .rightBox span {
		line-height: 35px;
		margin: 0 20px;
		font-size: 15px;
		/* font-family: "微软雅黑"; */
		color: gray;
	}
	
	.item .bottom .rightBox span::before {
		margin-right: 10px;
		color: #dd5a64;
	}
	
	.getMore {
		width: 100px;
		height: 100px;
		border: none;
		background-color: skyblue;
		position: fixed;
		right: 100px;
		top: 50%;
		margin-top: -50px;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>

<body>
	<h1>使用jq写的页面</h1>
	<input type="button" value="加载更多" class='getMore'>
	<div class="container">
		<div class="item">
			<a href="#" class='cover'><img src="images/vol.859.jpg" alt=""></a>
			<div class="bottom">
				<a href="#">vol.847 用一首歌来想象你</a>
				<div class='rightBox'>
					<span class='icon-heart'>18554</span>
					<span class='icon-comment'>292</span>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

<!-- 导入js插件 模板插件-->
<script type="text/javascript" src='js/template-native.js'></script>


<!-- 导入jq -->
<script type="text/javascript" src='js/jquery.min.js'></script>

<!-- 定义模板 -->
<script type="text/template" id='template'>
	<%for(var i=0;i<items.length;i++){%>
		<div class="item">
			<a href="#" class='cover'><img src="<%=items[i].path%>" alt=""></a>
			<div class="bottom">
				<a href="#">
					<%=items[i].name%>
				</a>
				<div class='rightBox'>
					<span class='icon-heart'><%=items[i].star%></span>
					<span class='icon-comment'><%=items[i].message%></span>
				</div>
			</div>
		</div>
		<%}%>
</script>

<!-- 自己的代码 -->
<script type="text/javascript">
// 使用jq 绑定点击事件
$(function() {
	$(".getMore").click(function() {
		// 使用 jq  发送 ajax请求
		$.ajax({
			url: '02.getMore.php',
			type: 'get',
			success: function(data) {
				// console.log(data);
				// 转化为 js对象 数组
				var oneObj = JSON.parse(data);

				// 包装为 js对象
				var obj = {
					items: [oneObj]
				};

				// 调用模板引擎的方法 填充数据
				var resultStr = template('template', obj);
			
				// 添加到界面上
				$('.container').append(resultStr);
			}
		});
	})
})
</script>

PHP

<?php 
	// 读取json文件  str 
	$str = file_get_contents('data/info.json');

	// 转化为 php中的数组 str->php arr
	$arr = json_decode($str);

	// 从数组中 获取 某一个元素 array_rand(arr,1);  随机的index
	$randomKey = array_rand($arr,1);


	// 讲 获取到的单个 元素 返回给浏览器
	$oneObj = $arr[$randomKey]; // 获取的是 php对象 

	// 因为 如果直接 $oneObj返回 发回的格式 是 php中的 对象 并不是 json格式字符串
	// print_r($oneObj); // 直接将 对象 返回给 浏览器 不能直接使用echo

	// 所以 我们需要 使用 json_encode 进行转化 obj ->str json 格式 字符串
	echo  json_encode($oneObj);
 ?>

info

[
	{
		"path":"images/vol.859.jpg",
		"name":"vol.859 那阳光，灿烂到心底",
		"star":"6977",
		"message":"188"
	},{
		"path":"images/vol.858.jpg",
		"name":"vol.858 守望者",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.857.jpg",
		"name":"vol.857 日落黄昏时",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.856.jpg",
		"name":"vol.856 生命中不能承受之轻",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.855.jpg",
		"name":"vol.855 尽是多情之意",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.854.jpg",
		"name":"vol.854 摇滚的孩子不会老去",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.853.jpg",
		"name":"vol.853 散落的光阴",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.852.jpg",
		"name":"vol.852 夜色正迷离",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.851.jpg",
		"name":"vol.851 The Party Is Not Over",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.850.jpg",
		"name":"vol.850 因为短暂 所以永恒",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.849.jpg",
		"name":"vol.849 时代挽歌",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.848.jpg",
		"name":"vol.848 夜漫长",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.847.jpg",
		"name":"vol.847 用一首歌来想象你",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.846.jpg",
		"name":"vol.846 说给你听",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.845.jpg",
		"name":"vol.845 The L World",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.844.jpg",
		"name":"vol.844 江湖",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.843.jpg",
		"name":"vol.843 回家",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.842.jpg",
		"name":"vol.842 故人难却",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.841.jpg",
		"name":"vol.841 总有片刻的悲伤和欢愉",
		"star":"9012",
		"message":"188"
	},{
		"path":"images/vol.840.jpg",
		"name":"vol.840 停下来看看世界的风景",
		"star":"9012",
		"message":"188"
	}
]

懒加载（模版引擎+ajax工具+jq）

猜你喜欢