模板引擎
是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
为什么要使用模板引擎
我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行，但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。
【演示：使用拼串进行渲染的缺点.html】
作用：代替前面渲染数据是拼接字符串操作
实际工作渲染数据使用的模板引擎
常见的模板引擎
BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/ velocity.js：https://github.com/shepherdwind/velocity.js/ ArtTemplate：https://github.com/aui/artTemplate
artTemplate是使用最广泛，效率最高的模板引擎，需要大家掌握。
artTemplate的使用
artTemplate入门
1.引入模板引擎的js文件
<script src="template-web.js"></script>
2.准备模板
<!--
指定了type为text/template后，这一段script标签并不会解析，也不会显示。
-->
<script type="text/template" id="tmp">
<p>姓名：{{ username }}</p>
<p>年龄：{{ age }}</p>
<p>技能：{{ skill }}</p>
<p>描述：{{desc }}</p>
</script>
3.准备数据
//3. 准备数据,数据是后台获取的，可以随时变化
var json = {
userName:"隔壁老王",
age:18,
skill:"查水表",
desc:"年轻气壮"
}
4.将模板与数据进行绑定
//第一个参数：模板的id
//第二个参数：数据
//返回值：根据模板生成的字符串。
var html = template("myTmp", json);
console.log(html);
5.将数据显示到页面
var div = document.querySelector("div");
div.innerHTML = html;
注意：传递给模板引擎的数据必须是对象
artTemplate语法
if语法
{{if gender='男'}}
<div class="man">
{{else}}
<div class="woman">
{{/if}}
each语法
<!--
1. {{each data}} 可以通过$value 和 $index获取值和下标
2. {{each data v i}} 自己指定值为v，下标为i
-->
{{each data v i}}
<li>
<a href="{{v.url}}">
<img src="{{v.src}}" alt="">
<p>{{v.content}}</p>
</a>
</li>
{{/each}}
//如果返回的数据是个数组，必须使用对象进行包裹，因为在{{}}中只写书写对象的属性。
var html = template("navTmp", {data:info});
瀑布流案例
封装jQuery瀑布流插件
//特点分析：
//1. 页面中每个图片模块使用绝对定位，所以每个图片的位置，都是动态计算出来的；
//2. 每列直接会有间隙， 列数=容器的宽度/（一列的宽度+间隙）
//思路分析：
//1. 获取所有的图片模块，算出列数
//2. 初始化一个数组，用户存储每一列的高度 [0,0,0,0,0]
//3. 查找数组的最小列，每次都把图片定位到最小列的位置
//4. 更新数组最小列的高度（加上定位过来的图片的高度）
代码参考：
//向jQuery的原型中添加方法
$.fn.waterFall=function(option){
var data=option.gap||20;
//1-获取页面中所有item 逐一进行定位
var items=$(this).children();
// 获取第一个item的宽度 225
var width=items.width();
//列数
var count=Math.floor($(this).width()/(width+data.gap));
//数组记录列高
var column=[];
//遍历给所有的 item进行定位
// index 索引值，ele当前遍历元素
items.each(function(index,ele){
//第一行
// top：0 left:index*(width+gap);
if(index<count){ //第一行
$(ele).css({
top:0,
left:index*(width+data.gap)
})
column[index]=$(ele).height()+data.gap; //更新列高
// console.log(column);
}else{
//其他图片 一个一个找最小列高进行排列
//先找最小列高
var minHeight=column[0];
var minKey=0;
for(var i=0;i<column.length;i++){
if(column[i]<minHeight){
minHeight=column[i]; //记录列高最小值
minKey=i; //记录最小列索引
}
}
//设置当前图片的坐标
$(ele).css({
top:minHeight, //最小列的列高
left:minKey*(width+data.gap) //最小列的索引值*（宽度+边距）
})
//更新列高
column[minKey]+=$(ele).height()+data.gap;
}
})
//求出所有列的最大值
var maxHeight=column[0];
for(var i=0;i<column.length;i++){
if(column[i]>maxHeight){
maxHeight=column[i];
}
}
//设置items的高度
$('.items').height(maxHeight);
}
瀑布流完整版
//需求分析：
//1. 页面刚开始，没有任何一张图片。因此需要从通过ajax获取第一屏的图片
//2. 使用模版引擎将获取到的数据渲染到页面
//3. 点击加载更多获取下一屏的数据
//4. 给window注册scroll事件，当触底时，需要动态的加载图片。
//5. 加载时，显示加载中的提示信息，并且要求不能重复发送ajax请求
//6. 当服务端返回图片数量为0时，提示用户没有更多数据。
接口文档
接口地址:
./data.php
请求方式：
post
请求的参数：
page:请求的页码
返回数据格式(json)：
page:下一页的页码
items：返回的图片数据集合