Ajax 套用模板實(shí)現(xiàn)類瀑布流

設(shè)計(jì)的技術(shù)：

模板引擎技術(shù)
類似JQuery的 Underscore.js

實(shí)現(xiàn)思路：

建立一個(gè)模板
使用Underscore.js 進(jìn)行數(shù)據(jù) json 填充

一、模板建立

涉及知識(shí)是 HTML 和 CSS涛菠。

模板制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 請(qǐng)求頁面</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="">能共苦為何不能同甘？股權(quán)分配決定企業(yè)生死撇吞！</a></h3>
                    <div class="introduction">
                        股權(quán)分配是一門藝術(shù)俗冻，不是精準(zhǔn)的科學(xué)，我們不建議用一個(gè)固定的公式算股權(quán)牍颈。那么迄薄，創(chuàng)始人，你到底該如何分配股權(quán)煮岁？
                    </div>
                    <div class="feed_info">
                        
                        <a href="">牛透社</a>
                        <span>14:45</span>
                        <span>閱讀(318)</span>
                        <span class="labels">
                            <a href="">股權(quán)分配</a>
                            <a href="">創(chuàng)業(yè)公司</a>
                            <a href="">崔牛會(huì)</a>
                        </span>
                    </div>
                </div>

            </div>

            <div class="more">
                請(qǐng)稍后...正在加載
            </div>
        </div>
        
    </div>
    <div class="footer"><span>我是頁面底部</span></div>

</body>
</html>

接下來

二讥蔽、數(shù)據(jù)填充

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

效果展示.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax 請(qǐng)求頁面</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="">能共苦為何不能同甘？股權(quán)分配決定企業(yè)生死画机！</a></h3>
                        <div class="introduction">
                            股權(quán)分配是一門藝術(shù)冶伞，不是精準(zhǔn)的科學(xué)，我們不建議用一個(gè)固定的公式算股權(quán)步氏。那么响禽，創(chuàng)始人，你到底該如何分配股權(quán)荚醒？
                        </div>
                        <div class="feed_info">
                            
                            <a href="">牛透社</a>
                            <span>14:45</span>
                            <span>閱讀(318)</span>
                            <span class="labels">
                                <a href="">股權(quán)分配</a>
                                <a href="">創(chuàng)業(yè)公司</a>
                                <a href="">崔牛會(huì)</a>
                            </span>
                        </div>
                    </div>

                </div>
     -->
                
            </div>
            <div class="more">
                請(qǐng)稍后...正在加載
        </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="">股權(quán)分配</a>
                            <a href="">創(chuàng)業(yè)公司</a>
                            <a href="">崔牛會(huì)</a> -->
                            <!-- 此處的數(shù)量不一芋类，通過查詢json的數(shù)量然后append -->
                            <!-- 第二種方法： -->
                                <%=labels%>
                        </span>
                    </div>
                </div>

            </div>

    </script>
    <!-- 數(shù)據(jù)操作 -->
    <script>
        //點(diǎn)擊每個(gè)label去的地方
        var url = "http://baijia.baidu.com/?tn=listarticle&labelid=";
        // 得到模板的內(nèi)容
        var templateString = $("#template").html();
        //能夠根據(jù)模板字符串來創(chuàng)造一個(gè)數(shù)據(jù)綁定函數(shù)，這是underscore的語法
        var compile = _.template(templateString);
        // 頁面加載page
        var page = 0;
        getJSONpage(page);
        function getJSONpage(page){
                $(".more").show();
                // 函數(shù)里面放入JSON
                // get請(qǐng)求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;     //這個(gè)return很關(guān)鍵界阁，后面的DOM不會(huì)組裝了侯繁，后面的開鎖語句也不執(zhí)行
                    }
                    //得到字典數(shù)組，存放在JSON的data屬性里面的list屬性里面
                    //dictionary里面存放了10個(gè)字典
                    _.each(data.data.list,function(dictionary){
                        //第二種方法：
                        //現(xiàn)在先進(jìn)行字典修正泡躯，先完成字典修正贮竟，然后數(shù)據(jù)綁定
                        dictionary.labels="";
                        //遍歷這個(gè)字典的m_label_names，完成字符串的拼接精续，就是字典修正了
                        _.each(dictionary.m_label_names,function(item){
                            dictionary.labels += "<a href='"+url+item.m_id+"'>"+ item.m_name +"</a>";
                            
                        });
                        //數(shù)據(jù)綁定坝锰，此時(shí)用的字典是我們修正好的字典
                        
                        var domstring = compile(dictionary);
                        //轉(zhuǎn)為jQuery對(duì)象
                        $dom = $(domstring);
                        
                        //把jQuery對(duì)象添加到頁面上
                        $(".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 拿掉這個(gè)類名之后，more就不顯示
                        $(".more").hide();
                    });
                });
                
        }
        var lock = true;
        // 添加滾動(dòng)事件加載更多新聞
        $(window).scroll(function(){
                //函數(shù)截流  
                if(!lock) return;
            //scrollTop()是方法
                var rate = $(window).scrollTop()/($(document).height()-$(window).height());
                if(rate >=0.7){
                    console.log(78);
                    //全局信號(hào)量++
                    page++;
                    //函數(shù)截流重付，每次觸發(fā)的時(shí)候要把鎖置為false
                    lock = false;
                    getJSONpage(page);
                    
                }
        });
    </script>
</body>
</html>

其中一個(gè) JSON 結(jié)構(gòu)：

{
    "errno":0,//未成功加載
    "data":{
        "total":200,//所有的JSON加載完后會(huì)返回?cái)?shù)字0愉豺。
        "list":[
            {
                "ID":"442343",
                "m_create_time":"14:45",
                "m_title":"能共苦為何不能同甘疾渣？股權(quán)分配決定企業(yè)生死！",
                "m_summary":"股權(quán)分配是一門藝術(shù)辐真，不是精準(zhǔn)的科學(xué)，我們不建議用一個(gè)固定的公式算股權(quán)翅帜。那么，創(chuàng)始人，你到底該如何分配股權(quán)导街？",
                "hotcount":318,
                "m_label_names":[
                    {
                        "m_id":"46985",
                        "m_name":"股權(quán)分配"
                    },
                    {
                        "m_id":"13791",
                        "m_name":"創(chuàng)業(yè)公司"
                    },
                    {
                        "m_id":"71206",
                        "m_name":"崔牛會(huì)"
                    }
                ],
                "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":"債券市場(chǎng)投資者為啥成了“驚弓之鳥”？ ",
                "m_summary":"企業(yè)債頻發(fā)違約事件纤子，剛性兌付已被打破搬瑰，債市投資者成了“驚弓之鳥”。筆者認(rèn)為控硼，一方面泽论，因一時(shí)缺乏償債能力的企業(yè)，要允許其通過各種途徑來化解壓力卡乾。另一方面翼悴，對(duì)于救活無望的企業(yè)，就要打破剛兌幔妨，允許其違約鹦赎。",
                "hotcount":637,
                "m_label_names":[
                    {
                        "m_id":"26146",
                        "m_name":"企業(yè)債"
                    }
                ],
                "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":"不執(zhí)著財(cái)經(jīng) 張平",
                "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":"主板業(yè)績(jī)?cè)鏊僖呀?jīng)跑不過GDP增速，在中國(guó)做成長(zhǎng)股投資误堡，你必須選擇新三板古话。",
                "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":"蘋果在華的壓力來自三個(gè)方面……",
                "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":"自動(dòng)駕駛趨勢(shì)不可擋埂伦，希望少炒概念煞额，穩(wěn)步推進(jìn)！",
                "m_summary":"自動(dòng)駕駛沾谜，不再是停留在科幻片中膊毁。個(gè)人只是希望，這樣的新東西基跑，在我們這里婚温，能夠更加緩步穩(wěn)健的推行，否則媳否，又不知道會(huì)出現(xiàn)多少幺蛾子栅螟！",
                "hotcount":1939,
                "m_label_names":[
                    {
                        "m_id":"22659",
                        "m_name":"自動(dòng)駕駛"
                    },
                    {
                        "m_id":"15295",
                        "m_name":"汽車產(chǎn)業(yè)"
                    }
                ],
                "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":"自拍無人機(jī)、智能自拍機(jī)器人為何屢敗屢戰(zhàn)篱竭？ ",
                "m_summary":"上個(gè)月有這么四件事力图。從手機(jī)數(shù)碼到網(wǎng)紅，從飛行攝像頭再到自拍主題樂園掺逼，印象管理的相關(guān)產(chǎn)業(yè)在中國(guó)這一塊土地上已經(jīng)開始發(fā)芽生根",
                "hotcount":565,
                "m_label_names":[
                    {
                        "m_id":"108526",
                        "m_name":"印象管理"
                    },
                    {
                        "m_id":"10520",
                        "m_name":"無人機(jī)"
                    },
                    {
                        "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年前的香農(nóng)專訪：一個(gè)頑皮的科學(xué)巨匠吃媒，信息論之父",
                "m_summary":"這篇專訪為我們揭示了香農(nóng)性格的多個(gè)側(cè)面：除了是廣為人知的信息理論之父，他還是一位投資人、發(fā)明愛好者赘那、解謎愛好者和愛搞惡作劇的人刑桑。",
                "hotcount":2505,
                "m_label_names":[
                    {
                        "m_id":"62845",
                        "m_name":"香農(nóng)"
                    },
                    {
                        "m_id":"108519",
                        "m_name":"科學(xué)巨匠"
                    },
                    {
                        "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":"機(jī)器之心 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大行業(yè)，你會(huì)因此而失業(yè)嗎募舟？",
                "m_summary":"斯坦福大學(xué)人工智能與倫理學(xué)教授杰瑞?卡普蘭認(rèn)為祠斧，不久的將來，人類再也不用勞動(dòng)拱礁。因?yàn)槿斯ぶ悄茉谧詣?dòng)化作業(yè)琢锋、自動(dòng)駕駛，合成智能呢灶、執(zhí)行能力等諸多方面的優(yōu)勢(shì)明顯大于人類吩蔑。",
                "hotcount":5172,
                "m_label_names":[
                    {
                        "m_id":"10522",
                        "m_name":"自動(dòng)化"
                    },
                    {
                        "m_id":"11484",
                        "m_name":"就業(yè)"
                    },
                    {
                        "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":"機(jī)器之心 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":"構(gòu)建人工智能系統(tǒng)太難？Facebook讓機(jī)器構(gòu)建人工智能",
                "m_summary":"構(gòu)建人工智能系統(tǒng)太難了填抬，于是 Faceook 開發(fā)了一個(gè)人工智能系統(tǒng)自己構(gòu)建人工智能。",
                "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":"機(jī)器之心 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》 封面文章：人工智能引發(fā)材料科學(xué)變革",
                "m_summary":"一些研究者相信隧期，機(jī)器學(xué)習(xí)技術(shù)可以變革材料科學(xué)飒责。",
                "hotcount":230,
                "m_label_names":[
                    {
                        "m_id":"108523",
                        "m_name":"材料科學(xué)"
                    },
                    {
                        "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":"機(jī)器之心 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

最后編輯于：2019.06.03 11:20:31

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市仆潮，隨后出現(xiàn)的幾起案子宏蛉，更是在濱河造成了極大的恐慌，老刑警劉巖性置，帶你破解...
沈念sama閱讀 217,657評(píng)論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件拾并，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡鹏浅，警方通過查閱死者的電腦和手機(jī)嗅义，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,889評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來隐砸，“玉大人之碗，你說我怎么就攤上這事〖鞠＃” “怎么了褪那？”我有些...
開封第一講書人閱讀 164,057評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)式塌。經(jīng)常有香客問我博敬，道長(zhǎng)，這世上最難降的妖魔是什么峰尝？我笑而不...
開封第一講書人閱讀 58,509評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任偏窝，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘囚枪。我一直安慰自己派诬，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,562評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布链沼。她就那樣靜靜地躺著默赂，像睡著了一般。火紅的嫁衣襯著肌膚如雪括勺。梳的紋絲不亂的頭發(fā)上缆八，一...
開封第一講書人閱讀 51,443評(píng)論 1贊 302
城市分裂傳說
那天，我揣著相機(jī)與錄音疾捍，去河邊找鬼奈辰。笑死，一個(gè)胖子當(dāng)著我的面吹牛乱豆，可吹牛的內(nèi)容都是我干的奖恰。我是一名探鬼主播，決...
沈念sama閱讀 40,251評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼宛裕，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼瑟啃！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起揩尸，我...
開封第一講書人閱讀 39,129評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤蛹屿，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后岩榆，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體错负，經(jīng)...
沈念sama閱讀 45,561評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,779評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年勇边，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了犹撒。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,902評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡粒褒，死狀恐怖油航，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情怀浆，我是刑警寧澤谊囚，帶...
沈念sama閱讀 35,621評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站执赡，受9級(jí)特大地震影響镰踏，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沙合，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,220評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一奠伪、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦绊率、人聲如沸谨敛。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,838評(píng)論 0贊 22
一樁弒父案滤否，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽脸狸。三九已至，卻和暖如春藐俺，著一層夾襖步出監(jiān)牢的瞬間炊甲，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,971評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工欲芹，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卿啡，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,025評(píng)論 2贊 370
代替公主和親
正文我出身青樓菱父，卻偏偏與公主長(zhǎng)得像颈娜，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子浙宜，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,843評(píng)論 2贊 354

Ajax 套用模板實(shí)現(xiàn)類瀑布流

一、模板建立

二讥蔽、數(shù)據(jù)填充

推薦閱讀更多精彩內(nèi)容