<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>落网</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;
}
.left-control {
position: fixed;
right: 100px;
top: 50%;
transform: translateY(-50%);
}
#getMore {
width: 100px;
height: 100px;
border: none;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#getSome {
width: 100px;
height: 100px;
border: none;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="left-control">
<h2>加载一张</h2>
<div id='getMore' class="icon-download icon-4x"></div>
<!--<div id='getMore' class="icon-spinner icon-spin icon-4x"></div>-->
<h2>加载多张</h2>
<div id='getSome' class="icon-download icon-4x"></div>
</div>
<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>
<!-- 1.使用jQuery 发送ajax请求 -->
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<!--
步骤
0.导入模板引擎
1.定义模板
2.挖坑 起名字
挖坑 一般是取决于 数据
3.填坑
数据 服务器 ajax
回调函数
4.使用
-->
<!-- 导入模板引擎 -->
<script src='./js/template-web.js'></script>
<!-- 定义模板 -->
<script type='text/html' id='template'>
<div class="item">
<a href="#" class="cover"><img src="{{path}}" alt=""></a>
<div class="bottom">
<a href="#">{{name}}</a>
<div class="rightBox">
<span class="icon-heart">{{star}}</span>
<span class="icon-comment">{{message}}</span>
</div>
</div>
</div>
</script>
<script>
// 获取数据
$(function(){
$('#getMore').click(function(){
$.ajax({
url:'_api/luowang.php',
data:{
index:3
},
success:function(data){
console.log(data);
// 填坑
var result = template('template',data.item);
console.log(result);
$('.container').append(result);
}
})
})
// 获取多条
$('#getSome').click(function(){
$.ajax({
url:'_api/luowang_getSome.php',
data:{
num:Math.floor((16*Math.random()))
},
success:function(data){
console.log(data);
// 循环 填坑
for(var i =0;i<data.items.length;i++){
// 填坑 使用
$('.container').append(template('template',data.items[i]));
}
}
})
})
})
</script>
