Amaze UI

Web 组件

List 内容列表

内容列表组件。

目录

组件演示

default（更多在上）

栏目标题

更多 »
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="##">
      <h2>栏目标题</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <li class="am-g am-list-item-dated">
        <a href="##" class="am-list-item-hd">我很囧，你保重....晒晒旅行中的那些囧！</a>
        <span class="am-list-date">2013-09-18</span>
      </li>
      <li class="am-g am-list-item-dated">
        <a href="##" class="am-list-item-hd">我最喜欢的一张画</a>
        <span class="am-list-date">2013-10-14</span>
      </li>
      <li class="am-g am-list-item-dated">
        <a href="##" class="am-list-item-hd">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
        <span class="am-list-date">2013-11-18</span>
      </li>
    </ul>
  </div>
</div>

default（更多在下）

栏目标题

查看更多 »
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>栏目标题</h2>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <li class="am-g">
        <a href="http://www.douban.com/online/11614662/" class="am-list-item-hd">我很囧，你保重....晒晒旅行中的那些囧！</a>
      </li>
      <li class="am-g">
        <a href="http://www.douban.com/online/11624755/" class="am-list-item-hd">我最喜欢的一张画</a>
      </li>
      <li class="am-g">
        <a href="http://www.douban.com/online/11645411/" class="am-list-item-hd">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
      </li>
    </ul>
  </div>
  <!--更多在底部-->
  <div class="am-list-news-ft">
    <a class="am-list-news-more am-btn am-btn-default" href="###">查看更多 &raquo;</a>
  </div>
</div>

default（带摘要）

栏目标题

更多 »
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>栏目标题</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <li class="am-g am-list-item-desced">
        <a href="http://www.douban.com/online/11614662/" class="am-list-item-hd">我很囧，你保重....晒晒旅行中的那些囧！</a>
        <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
      </li>
      <li class="am-g am-list-item-desced">
        <a href="http://www.douban.com/online/11624755/" class="am-list-item-hd">我最喜欢的一张画</a>
        <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
      </li>
      <li class="am-g">
        <a href="http://www.douban.com/online/11645411/" class="am-list-item-hd">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
      </li>
    </ul>
  </div>
</div>

default（上图+摘要）

缩略图在上方 + 摘要

更多 »
  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
  • 我最喜欢的一张画

    我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>缩略图在上方 + 摘要</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <!--缩略图在标题上方-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-col col-sm-12">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"
            />
          </a>
        </div>
        <div class="am-col am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11614662/">我很囧，你保重....晒晒旅行中的那些囧！</a>
          </h3>
          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-col col-sm-12">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画" />
          </a>
        </div>
        <div class="am-col am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</a>
          </h3>
          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-top">
        <div class="am-list-thumb am-col col-sm-12">
          <a href="http://www.douban.com/online/11645411/">
            <img src="http://img3.douban.com/lpic/o638852.jpg" alt="“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！"
            />
          </a>
        </div>
        <div class="am-col am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11645411/">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
          </h3>
          <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3.
            在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>
        </div>
      </li>
    </ul>
  </div>
</div>

default（左图+摘要）

左图 + 摘要

更多 »
  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
  • 我最喜欢的一张画

    我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>左图 + 摘要</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <!--缩略图在标题左边-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"
            />
          </a>
        </div>
        <div class="am-col col-sm-8 am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11614662/">我很囧，你保重....晒晒旅行中的那些囧！</a>
          </h3>
          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画" />
          </a>
        </div>
        <div class="am-col col-sm-8 am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</a>
          </h3>
          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced">
        <div class="am-col am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11645411/">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
          </h3>
          <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3.
            在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>
        </div>
      </li>
    </ul>
  </div>
</div>

default（右图+摘要）

缩略图在标题右边 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
    我很囧，你保重....晒晒旅行中的那些囧！

  • 我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
    我最喜欢的一张画

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>缩略图在标题右边 + 摘要</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <!--缩略图在标题右边-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
        <div class="am-col col-sm-8 am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11614662/">我很囧，你保重....晒晒旅行中的那些囧！</a>
          </h3>
          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
        </div>
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"
            />
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
        <div class="am-col col-sm-8 am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</a>
          </h3>
          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
        </div>
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画" />
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced">
        <div class="am-col am-list-main">
          <h3 class="am-list-item-hd">
            <a href="http://www.douban.com/online/11645411/">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
          </h3>
          <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3.
            在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>
        </div>
      </li>
    </ul>
  </div>
</div>

default（下图+摘要）

缩略图在标题下左 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    我很囧，你保重....晒晒旅行中的那些囧！
    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！

  • 我最喜欢的一张画

    我最喜欢的一张画
    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>缩略图在标题下左 + 摘要</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <!--缩略图在标题下方居左-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11614662/">我很囧，你保重....晒晒旅行中的那些囧！</a>
        </h3>
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"
            />
          </a>
        </div>
        <div class="am-col col-sm-8 am-list-main">
          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-left">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</a>
        </h3>
        <div class="am-col col-sm-4 am-list-thumb">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画" />
          </a>
        </div>
        <div class="am-col col-sm-8 am-list-main">
          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
        </div>
      </li>
      <li class="am-g am-list-item-desced">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11645411/">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
        </h3>
        <div class="am-col am-list-main">
          <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3.
            在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>
        </div>
      </li>
    </ul>
  </div>
</div>

default（下右图+摘要）

缩略图在标题下右 + 摘要

更多 »

  • 我很囧，你保重....晒晒旅行中的那些囧！

    囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！
    我很囧，你保重....晒晒旅行中的那些囧！

  • 我最喜欢的一张画

    你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，
    我最喜欢的一张画

  • “你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！

    还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3. 在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
  <!--列表标题-->
  <div class="am-list-news-hd am-cf">
    <!--带更多链接-->
    <a href="###">
      <h2>缩略图在标题下右 + 摘要</h2>
      <span class="am-list-news-more am-fr">更多 &raquo;</span>
    </a>
  </div>
  <div class="am-list-news-bd">
    <ul class="am-list">
      <!--缩略图在标题下方居右-->
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-right">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11614662/">我很囧，你保重....晒晒旅行中的那些囧！</a>
        </h3>
        <div class="am-col col-sm-8 am-list-main">
          <div class="am-list-item-text">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》http://book.douban.com/subject/25711202/为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
        </div>
        <div class="am-list-thumb am-col col-sm-4">
          <a href="http://www.douban.com/online/11614662/">
            <img src="http://img5.douban.com/lpic/o636459.jpg" alt="我很囧，你保重....晒晒旅行中的那些囧！"
            />
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-bottom-right">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11624755/">我最喜欢的一张画</a>
        </h3>
        <div class="am-col col-sm-8 am-list-main">
          <div class="am-list-item-text">你最喜欢的艺术作品，告诉大家它们的------名图画，色彩，交织，撞色，线条雕塑装置当代古代现代作品的照片美我最喜欢的画群296795413进群发画，少说多发图，</div>
        </div>
        <div class="am-list-thumb am-col col-sm-4">
          <a href="http://www.douban.com/online/11624755/">
            <img src="http://img3.douban.com/lpic/o637240.jpg" alt="我最喜欢的一张画" />
          </a>
        </div>
      </li>
      <li class="am-g am-list-item-desced">
        <h3 class="am-list-item-hd">
          <a href="http://www.douban.com/online/11645411/">“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a>
        </h3>
        <div class="am-col am-list-main">
          <div class="am-list-item-text">还在苦恼圣诞礼物再也玩儿不出新意？快来抢2013最炫彩的跨国圣诞礼物！【参与方式】1.关注“UniqueWay无二之旅”豆瓣品牌小站http://brand.douban.com/uniqueway/2.上传一张**本人**在旅行中色彩最浓郁、最丰富的照片（色彩包含取景地、周边事物、服装饰品、女生彩妆等等，发挥你们无穷的创意想象力哦！^^）一定要有本人出现喔！3.
            在照片下方，附上一句旅行宣言作为照片说明。 成功参与活动！* 听他们刚才说，上传照片的次</div>
        </div>
      </li>
    </ul>
  </div>
</div>

使用方法

直接使用

  • 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 list_news，使用细节参照折叠面板组件。

云适配 WebIDE

  • 将组件拖入编辑界面；
  • 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = {
   // 列表标题
  "header": {
    "title": "最新文章",
    "link": "###",
    "moreText": "更多 >",
    "morePosition": "bottom"    // 更多链接位置 [bottom|top]
  },

  // 列表主要内容
  "main": [
    {
      "title": "",            // 新闻标题
      "link": "",             // 新闻链接
      "date": "",             // 日期
      "desc": "",             // 摘要信息，支持html
      "img": "",              // 缩略图地址

      // 数据接口
      "thumbAddition": "",    // 缩略图附加信息，可传 html，在thumb 模式下有效，显示在缩略图下面
      "mainAddition": ""      // 附加信息，可传 html，任何模式下都有效
    }
  ]
};

return data;

数据接口 

{
  // id
  "id": "",

  // 自定义 class
  "className": "",

  // 主题
  "theme": "",

  "options": {
   // normal、thumb
    "type": "",

    // 当type为 thumb 时必传
    "thumbPosition": "bottom"
    // top-一般用于全宽模式
    // bottom - bottom-left | bottom-right
    // left - right
  },

  // 数据传递
  "content": {
    "header": {
      "title": "最新文章", // 栏目标题
      "link": "###",
      "moreText": "更多 >", // 更多链接显示文字
      "morePosition": "bottom" // 【更多】链接位置，top、bottom，如果不设置则不显示更多链接
    },
    main: [
      {
        "title": "", // 新闻标题
        "link": "",  // 新闻链接
        "date": "",  // 日期
        "desc": "",  // 摘要信息，支持html
        "img": "", // 图片链接

        // 数据接口
        "thumbAddition": "", // 缩略图附加信息，可传 html，thumb 模式下有效，显示在缩略图下面
        "mainAddition": ""  // 附加信息，可传 html，任何模式下都有效
      }
    ]
}
侧栏导航
×
Amaze UI 微信
在微信上关注我们