图片列表

图片列表效果接住柵格布局决定一行显示数量。.aui-list-view结合.aui-gird-view来使用。

图片布局没有对图片高度进行控制,也就是会按原比例来显示。用户可以根据实际情况来限制下

<div class="aui-content"><p class="aui-padded-10">全是缩略图的布局样式</p><ul class="aui-list-view aui-grid-view">
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo3.png" />
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo2.png" />
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo5.png" />
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo6.png" />
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo1.png" />
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="/Public/Image/aui/demo4.png" />
            </li>
        </ul><p class="aui-padded-10">图片列表 一行两列,借助我们的栅格来实现</p><ul class="aui-list-view aui-grid-view">
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <img class="aui-img-object" src="/Public/Image/aui/demo4.png" /><div class="aui-img-body">
                    图文列表
                </div></li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <img class="aui-img-object" src="/Public/Image/aui/demo3.png" /><div class="aui-img-body">
                    图文列表
                </div></li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <img class="aui-img-object" src="/Public/Image/aui/demo1.png" /><div class="aui-img-body">
                    图文列表
                </div></li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <img class="aui-img-object" src="/Public/Image/aui/demo2.png" /><div class="aui-img-body">
                    图文列表
                </div></li>
        </ul></div>