Ajax 套用模板实现类瀑布流

设计的技术：

实现思路：

  • 建立一个模板
  • 使用Underscore.js 进行数据 json 填充

一、模板建立

涉及知识是 HTML 和 CSS。


模板制作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 请求页面</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }
        .header,.footer {
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            background-color: lightblue;
            font-size: 28px;
            color: blue;
            text-align: center;
            line-height: 300px;
            font-weight: bold;
        }       
        .footer {
            line-height: 200px;
            font-weight: bold;
        }
        .content {
            width: 1000px;
            margin: 0 auto;
        }
        .content .articles {
            width: 680px;
        }
        .content .articles .more {
            width: 300px;
            margin: 10px auto;
            font-size: 14px;
            color: white;
            background-color: lightblue;
            border-radius: 8px;
            text-align: center;
            line-height: 25px;
        }
        .content .articles .feed {
            padding: 10px 0;
            overflow: hidden;
        }
        .content .articles .feed .feed_image img {
            width: 180px;
            height: 100px;
            float: left;
        }
        .content .articles .feed .feed_text {
            float: left;
            width: 480px;
            margin-left: 10px;
        }
        .content .articles .feed .feed_text .introduction {
            /*line-height: 150%;*/
            font-size: 14px;
            color: #333;
            margin-top: 10px;
            padding-bottom: 14px;
        }
        .content .articles .feed .feed_text h3 a {
            color: #333;
            text-decoration: none;
        }
        .content .articles .feed .feed_text .feed_info .labels {
            float: right;

        }
        .content .articles .feed .feed_text .feed_info {
            font-size: 12px;
        }
        .content .articles .feed .feed_text .feed_info a {
            text-decoration: none;
            color: #333;
            margin-right: 10px;
        }
        .content .articles .feed .feed_text .feed_info .labels a {
            text-decoration: none;
            margin-right: 5px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="header"><span>我是页面头部</span></div></div>
    <div class="content">
        <div class="articles">
            <div class="feed">
                <div class="feed_image">
                    <img src="images/test.jpg" alt="">
                </div>
                <div class="feed_text">
                    <h3><a href="">能共苦为何不能同甘？股权分配决定企业生死！</a></h3>
                    <div class="introduction">
                        股权分配是一门艺术，不是精准的科学，我们不建议用一个固定的公式算股权。那么，创始人，你到底该如何分配股权？
                    </div>
                    <div class="feed_info">
                        
                        <a href="">牛透社</a>
                        <span>14:45</span>
                        <span>阅读(318)</span>
                        <span class="labels">
                            <a href="">股权分配</a>
                            <a href="">创业公司</a>
                            <a href="">崔牛会</a>
                        </span>
                    </div>
                </div>

            </div>

            <div class="more">
                请稍后...正在加载
            </div>
        </div>
        
    </div>
    <div class="footer"><span>我是页面底部</span></div>

</body>
</html>

接下来

二、数据填充

先了解 Underscore.js 中文文档 http://www.bootcss.com/p/underscore/#template

效果展示.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 请求页面</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }
        .header,.footer {
            width: 1000px;
            height: 300px;
            margin: 0 auto;
            background-color: lightblue;
            font-size: 28px;
            color: blue;
            text-align: center;
            line-height: 300px;
            font-weight: bold;
            
        }       
        .footer {
            line-height: 200px;
            font-weight: bold;
            display: none;
        }
        .content {
            width: 1000px;
            margin: 0 auto;
        }
        .content .articles,.content .left_part {
            width: 680px;
        }
        .content .more {
            width: 300px;
            margin: 10px auto;
            font-size: 14px;
            color: white;
            background-color: lightblue;
            border-radius: 8px;
            text-align: center;
            line-height: 25px;
            display: none;
        }
        .content .articles .feed {
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
        }
        .content .articles .feed .feed_image img {
            width: 180px;
            height: 100px;
            float: left;
        }
        .content .articles .feed .feed_text {
            float: left;
            width: 480px;
            margin-left: 10px;
        }
        .content .articles .feed .feed_text .introduction {
            /*line-height: 150%;*/
            font-size: 14px;
            color: #333;
            margin-top: 10px;
            padding-bottom: 14px;
        }
        .content .articles .feed .feed_text h3 a {
            color: #333;
            text-decoration: none;
        }
        .content .articles .feed .feed_text .feed_info .labels {
            float: right;

        }
        .content .articles .feed .feed_text .feed_info {
            font-size: 12px;
        }
        .content .articles .feed .feed_text .feed_info a {
            text-decoration: none;
            color: #333;
            margin-right: 10px;
        }
        .content .articles .feed .feed_text .feed_info .labels a {
            text-decoration: none;
            margin-right: 5px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="header"><span>我是页面头部</span></div></div>
    <div class="content">
        <div class="left_part">
            <div class="articles">
                <!-- 此处的是模板 -->
                <!-- <div class="feed">
                    <div class="feed_image">
                        <img src="images/test.jpg" alt="">
                    </div>
                    <div class="feed_text">
                        <h3><a href="">能共苦为何不能同甘？股权分配决定企业生死！</a></h3>
                        <div class="introduction">
                            股权分配是一门艺术，不是精准的科学，我们不建议用一个固定的公式算股权。那么，创始人，你到底该如何分配股权？
                        </div>
                        <div class="feed_info">
                            
                            <a href="">牛透社</a>
                            <span>14:45</span>
                            <span>阅读(318)</span>
                            <span class="labels">
                                <a href="">股权分配</a>
                                <a href="">创业公司</a>
                                <a href="">崔牛会</a>
                            </span>
                        </div>
                    </div>

                </div>
     -->
                
            </div>
            <div class="more">
                请稍后...正在加载
        </div>
        </div>
        
    </div>
    
    <div class="footer"><span>我是页面底部</span></div>
    <!-- 引包 underscore/JQuery-->
    <script src="js/underscore.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>

    <!-- 模板template -->
    <script type="text/template" id= "template">
        <div class="feed">
                <div class="feed_image">
                    <img src="<%=m_image_url%>" alt="">
                </div>
                <div class="feed_text">
                    <h3><a href=""><%=m_title%></a></h3>
                    <div class="introduction">
                        <%=m_summary%>
                    </div>
                    <div class="feed_info">
                        
                        <a href=""><%=m_writer_name%></a>
                        <span><%=m_create_time%></span>
                        <span>阅读(<%=hotcount%>)</span>
                        <span class="labels">
                            <!-- <a href="">股权分配</a>
                            <a href="">创业公司</a>
                            <a href="">崔牛会</a> -->
                            <!-- 此处的数量不一，通过查询json的数量然后append -->
                            <!-- 第二种方法： -->
                                <%=labels%>
                        </span>
                    </div>
                </div>

            </div>

    </script>
    <!-- 数据操作 -->
    <script>
        //点击每个label去的地方
        var url = "http://baijia.baidu.com/?tn=listarticle&labelid=";
        // 得到模板的内容
        var templateString = $("#template").html();
        //能够根据模板字符串来创造一个数据绑定函数，这是underscore的语法
        var compile = _.template(templateString);
        // 页面加载page
        var page = 0;
        getJSONpage(page);
        function getJSONpage(page){
                $(".more").show();
                // 函数里面放入JSON
                // get请求JSON
                $.get("json/baijia"+page+".json",function(data){
                    console.log(data.data.total);
                    $(".more").show();
                    if(data.data.total == 0){
                        $(".more").html("没有更多了");
                        $(".more").show();
                        $(".footer").show();
                        return;     //这个return很关键，后面的DOM不会组装了，后面的开锁语句也不执行
                    }
                    //得到字典数组，存放在JSON的data属性里面的list属性里面
                    //dictionary里面存放了10个字典
                    _.each(data.data.list,function(dictionary){
                        //第二种方法：
                        //现在先进行字典修正，先完成字典修正，然后数据绑定
                        dictionary.labels="";
                        //遍历这个字典的m_label_names，完成字符串的拼接，就是字典修正了
                        _.each(dictionary.m_label_names,function(item){
                            dictionary.labels += "<a href='"+url+item.m_id+"'>"+ item.m_name +"</a>";
                            
                        });
                        //数据绑定，此时用的字典是我们修正好的字典
                        
                        var domstring = compile(dictionary);
                        //转为jQuery对象
                        $dom = $(domstring);
                        
                        //把jQuery对象添加到页面上
                        $(".articles").append($dom);
                        //第一种方法：
                        // _.each(dictionary.m_label_names,function(item){
                        //  $dom.find(".labels").append("<a href='"+url+item.m_id+"'>"+ item.m_name +"</a>");
                        // });
                        lock = true;
                        //拿掉more 拿掉这个类名之后，more就不显示
                        $(".more").hide();
                    });
                });
                
        }
        var lock = true;
        // 添加滚动事件加载更多新闻
        $(window).scroll(function(){
                //函数截流  
                if(!lock) return;
            //scrollTop()是方法
                var rate = $(window).scrollTop()/($(document).height()-$(window).height());
                if(rate >=0.7){
                    console.log(78);
                    //全局信号量++
                    page++;
                    //函数截流，每次触发的时候要把锁置为false
                    lock = false;
                    getJSONpage(page);
                    
                }
        });
    </script>
</body>
</html>

其中一个 JSON 结构：

{
    "errno":0,//未成功加载
    "data":{
        "total":200,//所有的JSON加载完后会返回数字0。
        "list":[
            {
                "ID":"442343",
                "m_create_time":"14:45",
                "m_title":"能共苦为何不能同甘？股权分配决定企业生死！",
                "m_summary":"股权分配是一门艺术，不是精准的科学，我们不建议用一个固定的公式算股权。那么，创始人，你到底该如何分配股权？",
                "hotcount":318,
                "m_label_names":[
                    {
                        "m_id":"46985",
                        "m_name":"股权分配"
                    },
                    {
                        "m_id":"13791",
                        "m_name":"创业公司"
                    },
                    {
                        "m_id":"71206",
                        "m_name":"崔牛会"
                    }
                ],
                "m_image_url":"[http://e.hiphotos.baidu.com/news/crop%3D120%2C3%2C1480%2C888%3Bw%3D638/sign=5df1883a85025aafc77d248bc6dc9954/77c6a7efce1b9d167118549bf4deb48f8d546469.jpg](http://e.hiphotos.baidu.com/news/crop%3D120%2C3%2C1480%2C888%3Bw%3D638/sign=5df1883a85025aafc77d248bc6dc9954/77c6a7efce1b9d167118549bf4deb48f8d546469.jpg)",
                "m_display_url":"[http://cuiqiang2008.baijia.baidu.com/article/442343](http://cuiqiang2008.baijia.baidu.com/article/442343)",
                "m_writer_name":"牛透社",
                "m_writer_url":"[http://cuiqiang2008.baijia.baidu.com/](http://cuiqiang2008.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442324",
                "m_create_time":"13:34",
                "m_title":"债券市场投资者为啥成了“惊弓之鸟”？ ",
                "m_summary":"企业债频发违约事件，刚性兑付已被打破，债市投资者成了“惊弓之鸟”。笔者认为，一方面，因一时缺乏偿债能力的企业，要允许其通过各种途径来化解压力。另一方面，对于救活无望的企业，就要打破刚兑，允许其违约。",
                "hotcount":637,
                "m_label_names":[
                    {
                        "m_id":"26146",
                        "m_name":"企业债"
                    }
                ],
                "m_image_url":"[http://f.hiphotos.baidu.com/news/crop%3D0%2C5%2C330%2C198%3Bw%3D638/sign=f6596ad68001a18be4a4480fa31f2b3d/d439b6003af33a8794ddece0c15c10385243b59c.jpg](http://f.hiphotos.baidu.com/news/crop%3D0%2C5%2C330%2C198%3Bw%3D638/sign=f6596ad68001a18be4a4480fa31f2b3d/d439b6003af33a8794ddece0c15c10385243b59c.jpg)",
                "m_display_url":"[http://zhangping1975.baijia.baidu.com/article/442324](http://zhangping1975.baijia.baidu.com/article/442324)",
                "m_writer_name":"不执着财经 张平",
                "m_writer_url":"[http://zhangping1975.baijia.baidu.com/](http://zhangping1975.baijia.baidu.com/)",
                "m_writer_account_type":"2",
                "m_attr_exclusive":"1",
                "m_attr_first_pub":"1"
            },
            {
                "ID":"442299",
                "m_create_time":"12:40",
                "m_title":"46%新三板公司年净利不够买帝都一套房",
                "m_summary":"主板业绩增速已经跑不过GDP增速，在中国做成长股投资，你必须选择新三板。",
                "hotcount":2037,
                "m_label_names":[
                    {
                        "m_id":"12534",
                        "m_name":"新三板"
                    }
                ],
                "m_image_url":"[http://f.hiphotos.baidu.com/news/crop%3D0%2C20%2C640%2C384%3Bw%3D638/sign=22d9ecf21830e924dbebc67171384234/d01373f082025aaf81de8f31fcedab64024f1a5f.jpg](http://f.hiphotos.baidu.com/news/crop%3D0%2C20%2C640%2C384%3Bw%3D638/sign=22d9ecf21830e924dbebc67171384234/d01373f082025aaf81de8f31fcedab64024f1a5f.jpg)",
                "m_display_url":"[http://ddxsb.baijia.baidu.com/article/442299](http://ddxsb.baijia.baidu.com/article/442299)",
                "m_writer_name":"读懂新三板",
                "m_writer_url":"[http://ddxsb.baijia.baidu.com/](http://ddxsb.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"1",
                "m_attr_first_pub":"1"
            },
            {
                "ID":"442297",
                "m_create_time":"12:36",
                "m_title":"无事不登三宝殿 库克或第八次访华 ！",
                "m_summary":"苹果在华的压力来自三个方面……",
                "hotcount":5640,
                "m_label_names":[
                    {
                        "m_id":"10255",
                        "m_name":"苹果"
                    },
                    {
                        "m_id":"13649",
                        "m_name":"库克"
                    }
                ],
                "m_image_url":"[http://h.hiphotos.baidu.com/news/crop%3D0%2C1%2C448%2C269%3Bw%3D638/sign=245cd986560fd9f9b4580f29181df81b/3b292df5e0fe992573959faa33a85edf8cb171ab.jpg](http://h.hiphotos.baidu.com/news/crop%3D0%2C1%2C448%2C269%3Bw%3D638/sign=245cd986560fd9f9b4580f29181df81b/3b292df5e0fe992573959faa33a85edf8cb171ab.jpg)",
                "m_display_url":"[http://yibeichen.baijia.baidu.com/article/442297](http://yibeichen.baijia.baidu.com/article/442297)",
                "m_writer_name":"易北辰",
                "m_writer_url":"[http://yibeichen.baijia.baidu.com/](http://yibeichen.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442275",
                "m_create_time":"12:09",
                "m_title":"自动驾驶趋势不可挡，希望少炒概念，稳步推进！",
                "m_summary":"自动驾驶，不再是停留在科幻片中。个人只是希望，这样的新东西，在我们这里，能够更加缓步稳健的推行，否则，又不知道会出现多少幺蛾子！",
                "hotcount":1939,
                "m_label_names":[
                    {
                        "m_id":"22659",
                        "m_name":"自动驾驶"
                    },
                    {
                        "m_id":"15295",
                        "m_name":"汽车产业"
                    }
                ],
                "m_image_url":"[http://b.hiphotos.baidu.com/news/crop%3D0%2C1%2C631%2C379%3Bw%3D638/sign=c9aee7f7219759ee5e1f3a8b8fcb6f27/00e93901213fb80ebab8e22d31d12f2eb83894db.jpg](http://b.hiphotos.baidu.com/news/crop%3D0%2C1%2C631%2C379%3Bw%3D638/sign=c9aee7f7219759ee5e1f3a8b8fcb6f27/00e93901213fb80ebab8e22d31d12f2eb83894db.jpg)",
                "m_display_url":"[http://ganjianying.baijia.baidu.com/article/442275](http://ganjianying.baijia.baidu.com/article/442275)",
                "m_writer_name":"笨手蛇",
                "m_writer_url":"[http://ganjianying.baijia.baidu.com/](http://ganjianying.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442246",
                "m_create_time":"11:18",
                "m_title":"自拍无人机、智能自拍机器人为何屡败屡战？ ",
                "m_summary":"上个月有这么四件事。从手机数码到网红，从飞行摄像头再到自拍主题乐园，印象管理的相关产业在中国这一块土地上已经开始发芽生根",
                "hotcount":565,
                "m_label_names":[
                    {
                        "m_id":"108526",
                        "m_name":"印象管理"
                    },
                    {
                        "m_id":"10520",
                        "m_name":"无人机"
                    },
                    {
                        "m_id":"12388",
                        "m_name":"自拍"
                    }
                ],
                "m_image_url":"[http://g.hiphotos.baidu.com/news/crop%3D0%2C0%2C1025%2C615%3Bw%3D638/sign=2a17245ea3c27d1eb169618426e5815e/d009b3de9c82d1583297cf4b870a19d8bc3e4237.jpg](http://g.hiphotos.baidu.com/news/crop%3D0%2C0%2C1025%2C615%3Bw%3D638/sign=2a17245ea3c27d1eb169618426e5815e/d009b3de9c82d1583297cf4b870a19d8bc3e4237.jpg)",
                "m_display_url":"[http://zxr.baijia.baidu.com/article/442246](http://zxr.baijia.baidu.com/article/442246)",
                "m_writer_name":"张笑容",
                "m_writer_url":"[http://zxr.baijia.baidu.com/](http://zxr.baijia.baidu.com/)",
                "m_writer_account_type":"2",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442205",
                "m_create_time":"11:13",
                "m_title":"24年前的香农专访：一个顽皮的科学巨匠，信息论之父",
                "m_summary":"这篇专访为我们揭示了香农性格的多个侧面：除了是广为人知的信息理论之父，他还是一位投资人、发明爱好者、解谜爱好者和爱搞恶作剧的人。",
                "hotcount":2505,
                "m_label_names":[
                    {
                        "m_id":"62845",
                        "m_name":"香农"
                    },
                    {
                        "m_id":"108519",
                        "m_name":"科学巨匠"
                    },
                    {
                        "m_id":"108520",
                        "m_name":"信息论"
                    }
                ],
                "m_image_url":"[http://h.hiphotos.baidu.com/news/crop%3D0%2C9%2C620%2C372%3Bw%3D638/sign=c818b9f21830e924dbebc6717138423f/b3119313b07eca80aa289d1d962397dda144831f.jpg](http://h.hiphotos.baidu.com/news/crop%3D0%2C9%2C620%2C372%3Bw%3D638/sign=c818b9f21830e924dbebc6717138423f/b3119313b07eca80aa289d1d962397dda144831f.jpg)",
                "m_display_url":"[http://synchuman.baijia.baidu.com/article/442205](http://synchuman.baijia.baidu.com/article/442205)",
                "m_writer_name":"机器之心 Synced",
                "m_writer_url":"[http://synchuman.baijia.baidu.com/](http://synchuman.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442236",
                "m_create_time":"11:09",
                "m_title":"人工智能即将颠覆这8大行业，你会因此而失业吗？",
                "m_summary":"斯坦福大学人工智能与伦理学教授杰瑞•卡普兰认为，不久的将来，人类再也不用劳动。因为人工智能在自动化作业、自动驾驶，合成智能、执行能力等诸多方面的优势明显大于人类。",
                "hotcount":5172,
                "m_label_names":[
                    {
                        "m_id":"10522",
                        "m_name":"自动化"
                    },
                    {
                        "m_id":"11484",
                        "m_name":"就业"
                    },
                    {
                        "m_id":"10523",
                        "m_name":"人工智能"
                    }
                ],
                "m_image_url":"[http://e.hiphotos.baidu.com/news/crop%3D24%2C1%2C499%2C299%3Bw%3D638/sign=967623c36c63f62408126343ba76dfd4/f703738da9773912d7722d9bff198618377ae2f0.jpg](http://e.hiphotos.baidu.com/news/crop%3D24%2C1%2C499%2C299%3Bw%3D638/sign=967623c36c63f62408126343ba76dfd4/f703738da9773912d7722d9bff198618377ae2f0.jpg)",
                "m_display_url":"[http://synchuman.baijia.baidu.com/article/442236](http://synchuman.baijia.baidu.com/article/442236)",
                "m_writer_name":"机器之心 Synced",
                "m_writer_url":"[http://synchuman.baijia.baidu.com/](http://synchuman.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442235",
                "m_create_time":"11:04",
                "m_title":"构建人工智能系统太难？Facebook让机器构建人工智能",
                "m_summary":"构建人工智能系统太难了，于是 Faceook 开发了一个人工智能系统自己构建人工智能。",
                "hotcount":586,
                "m_label_names":[
                    {
                        "m_id":"11230",
                        "m_name":"FACEBOOK"
                    },
                    {
                        "m_id":"10523",
                        "m_name":"人工智能"
                    }
                ],
                "m_image_url":"[http://b.hiphotos.baidu.com/news/crop%3D33%2C2%2C955%2C573%3Bw%3D638/sign=ee1332097e310a55d06b84b48a767085/a686c9177f3e6709d018ed053cc79f3df8dc552b.jpg](http://b.hiphotos.baidu.com/news/crop%3D33%2C2%2C955%2C573%3Bw%3D638/sign=ee1332097e310a55d06b84b48a767085/a686c9177f3e6709d018ed053cc79f3df8dc552b.jpg)",
                "m_display_url":"[http://synchuman.baijia.baidu.com/article/442235](http://synchuman.baijia.baidu.com/article/442235)",
                "m_writer_name":"机器之心 Synced",
                "m_writer_url":"[http://synchuman.baijia.baidu.com/](http://synchuman.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            },
            {
                "ID":"442230",
                "m_create_time":"11:03",
                "m_title":"《Nature》 封面文章：人工智能引发材料科学变革",
                "m_summary":"一些研究者相信，机器学习技术可以变革材料科学。",
                "hotcount":230,
                "m_label_names":[
                    {
                        "m_id":"108523",
                        "m_name":"材料科学"
                    },
                    {
                        "m_id":"108524",
                        "m_name":"Nature"
                    }
                ],
                "m_image_url":"[http://h.hiphotos.baidu.com/news/crop%3D0%2C27%2C630%2C378%3Bw%3D638/sign=3404d408d262853586af8861addf5af4/d8f9d72a6059252d7b7eb3fe339b033b5ab5b9db.jpg](http://h.hiphotos.baidu.com/news/crop%3D0%2C27%2C630%2C378%3Bw%3D638/sign=3404d408d262853586af8861addf5af4/d8f9d72a6059252d7b7eb3fe339b033b5ab5b9db.jpg)",
                "m_display_url":"[http://synchuman.baijia.baidu.com/article/442230](http://synchuman.baijia.baidu.com/article/442230)",
                "m_writer_name":"机器之心 Synced",
                "m_writer_url":"[http://synchuman.baijia.baidu.com/](http://synchuman.baijia.baidu.com/)",
                "m_writer_account_type":"0",
                "m_attr_exclusive":"0",
                "m_attr_first_pub":"0"
            }
        ]
    }
}

Underscore.js 中文文档 http://www.bootcss.com/p/underscore/#template

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容