underscore 的template 的魔板引擎

最新推荐文章于 2021-02-24 07:24:50 发布

越简单越好

最新推荐文章于 2021-02-24 07:24:50 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/gong1422425666/article/details/72338320

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<style type="text/css">
	*{
          margin: 0;
          padding: 0;
        }
        body{
          background-color: #ccc;
        }
        .waterfall{
            width: 790px;
            margin: 0 auto;
            position: relative;
        }
        .box{
            position: absolute;
            width: 230px;
            background-color: #fff;
            padding: 10px;
        }
        .box img{
          width: 230px;
          height: 375px;
        }
</style>
<body>	
	<div class="waterfall">
		
	</div>

</body>
<script type="text/templete" id="templete">
    <div class="box">
        <img src="<%= img %>" alt="">
        <div>
           <p><%= hero_name %></p>
        </div>
        <div><p>英雄：<%= hero_title %></p></div>
        <div><p>技能属性： <%= atk_range %></p></div>
        <div><p>英雄描述：<%= hero_desc %></p></div>
    </div>
  </script>
  <script charset="utf-8"src="js/jquery.min.js"></script>
  <script charset="utf-8"src="js/underscore.js"></script>
<script type="text/javascript">

	var colarr = [0,0,0];
	var width = 270;
	var page = 1;
	var pre_page = 10;	
	var flag = true;
	// $(".box").each(function(index,value){
	// 	// console.log(_.min(colarr));
	// 	var minvalue = _.min(colarr);
	// 	var minIndex = _.indexOf(colarr,minvalue);
	// 	console.log(minIndex*width);
	// 	colarr[minIndex] +=$(this).outerHeight()+30;
	// 	$(this).css({
	// 		"left":minIndex*width,
	// 		"top" :minvalue
	// 	})
	// });
	var templeteStr = $("#templete").html();
	var tempStr = _.template(templeteStr);
	var countHero = 84;
	function getPage(page,pre_page){
		$.ajax({
			url:"api/hero.php",
			data:{page:page,pre_page:pre_page},
			success:function(data){
				flag = false;
				var data = JSON.parse(data);
				var obj = data.hero;
				if ( page >= (countHero / pre_page )-2) {
                              flag = true;
                        }
				$.each(obj,function(index,value){
					var heroStr = tempStr(value);
					// console.log(heroStr);
					var   objdom = $(heroStr);
					$(".waterfall").append(objdom);
					var minvalue = _.min(colarr);
					var minIndex = _.indexOf(colarr,minvalue);
					// console.log(minIndex*width);
					colarr[minIndex] +=$(objdom).outerHeight()+30;
					objdom.css({
						"left":minIndex*width,
						"top" :minvalue
					})
				})
			}
		})
	}
	getPage(page,pre_page);
	$(window).scroll(function(event){
		// console.log( $(document).height());
		// console.log( $(window).height());
		// console.log( $(document).scrollTop())
		console.log(flag);
		if ($(window).scrollTop() >= $(document).height() - $(window).height()-100) {
			if (!flag) {
				page++;
				getPage(page,pre_page);
				console.log("haha")
				flag = true;
			}
			
		}
	})
</script>
</html>

以上的是一个瀑布流的代码其中用到了underscore 的template 的内容

步骤 1 现在《JavaScript中写段代码》

2 var templeteStr = $("#templete").html();
var tempStr = _.template(templeteStr);

var heroStr = tempStr(value);

3 heroStr就是替换过的数据