js模板引擎实战-瀑布流布局

IT小镇做题家
150 阅读2分钟

模板引擎

是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

为什么要使用模板引擎

我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行，但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。

作用：代替前面渲染数据是拼接字符串操作

实际工作渲染数据使用的模板引擎

常见的模板引擎

artTemplate是使用最广泛，效率最高的模板引擎，需要大家掌握。

artTemplate的使用

github地址

中文api地址

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);
}
avatar
文章
阅读
粉丝