czapp/pages/demo/listmedia/listmedia.html

<h5>无导航箭头</h5>
<div class="lr-list">
    <div class="lr-list-item lr-list-item-media">
        <img class="lr-media-head" src="images/1.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media">
        <img class="lr-media-head" src="images/2.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第二行数据；第三行数据。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media">
        <img class="lr-media-head" src="images/4.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第三行数据；第三行数据。</p></div>
    </div>
</div>
<h5>右边缩略图</h5>
<div class="lr-list">
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/1.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/2.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第二行数据；第三行数据。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/4.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第三行数据；第三行数据。</p></div>
    </div>
</div>
<h5>有导航箭头</h5>
<div class="lr-list">
    <div class="lr-list-item lr-list-item-media lr-nav-right">
        <img class="lr-media-head" src="images/1.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-nav-right">
        <img class="lr-media-head" src="images/2.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第二行数据；第三行数据。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-nav-right">
        <img class="lr-media-head" src="images/4.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第三行数据；第三行数据。</p></div>
    </div>
</div>
<h5>圆角列表</h5>

<div class="lr-list lr-card ">
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/1.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/2.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第二行数据；第三行数据。</p></div>
    </div>
    <div class="lr-list-item lr-list-item-media lr-list-item-media-right">
        <img class="lr-media-head" src="images/4.jpg">
        <div class="lr-media-body">可爱<p class="lr-ellipsis">可爱猫咪,给生活增添一些别样的乐趣；第三行数据；第三行数据。</p></div>
    </div>
</div>