layui-ul/demo/list.html

<fieldset class="layui-elem-field layui-field-title">
  <legend>头像列表</legend>
  <div class="layui-field-box">
    <div class="ul-avatar-list">
      <div class="ul-avatar-list-item">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
      <div class="ul-avatar-list-item">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
    </div>
    <div class="ul-avatar-list" style="width: 400px;">
      <div class="ul-avatar-list-item">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
      <div class="ul-avatar-list-item">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
    </div>
    <div class="ul-avatar-list" style="width: 200px;">
      <div class="ul-avatar-list-item current">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
      <div class="ul-avatar-list-item">
        <div class="ul-avatar-list-item-img"></div>
        <div class="ul-avatar-list-item-info">
          <div class="ul-avatar-list-item-title">
            张三
          </div>
          <div class="ul-avatar-list-item-tips">
            深山旅馆电话事件的最新消息
          </div>
          <div class="ul-avatar-list-item-time">
            19:54
          </div>
        </div>
      </div>
    </div>
  </div>


</fieldset>

<fieldset class="layui-elem-field layui-field-title">
  <legend>相册列表</legend>
  <div class="layui-field-box">
    <div class="ul-photo-list">
      <div class="ul-photo-item">
        <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-info">
          <div class="ul-photo-title">周末野外广场树林写真</div>
          <div class="ul-photo-plus">45P+1V</div>
          <div class="ul-photo-desc">相册说明内容</div>
        </div>
      </div>
      <div class="ul-photo-item">
        <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-info">
          <div class="ul-photo-title">周末野外广场树林写真</div>
          <div class="ul-photo-plus">45P+1V</div>
          <div class="ul-photo-desc">相册说明内容</div>
        </div>
      </div>
      <div class="ul-photo-item">
        <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-info">
          <div class="ul-photo-title">周末野外广场树林写真</div>
          <div class="ul-photo-plus">45P+1V</div>
          <div class="ul-photo-desc">相册说明内容</div>
        </div>
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
  <legend>卡片式相册列表</legend>
  <div class="layui-field-box">
    <div class="ul-photo-card-list">
      <div class="ul-photo-card-item">
        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-card-info">
          <div class="ul-photo-card-title">周末野外广场树林写真</div>
          <div class="ul-photo-card-desc">相册说明内容</div>
          <div class="ul-photo-card-plus">45P+1V</div>
        </div>
      </div>
      <div class="ul-photo-card-item">
        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-card-info">
          <div class="ul-photo-card-title">周末野外广场树林写真</div>
          <div class="ul-photo-card-desc">相册说明内容</div>
          <div class="ul-photo-card-plus">45P+1V</div>
        </div>
      </div>
      <div class="ul-photo-card-item">
        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-card-info">
          <div class="ul-photo-card-title">周末野外广场树林写真</div>
          <div class="ul-photo-card-desc">相册说明内容</div>
          <div class="ul-photo-card-plus">45P+1V</div>
        </div>
      </div>
      <div class="ul-photo-card-item">
        <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">

        </div>
        <div class="ul-photo-card-info">
          <div class="ul-photo-card-title">周末野外广场树林写真</div>
          <div class="ul-photo-card-desc">相册说明内容</div>
          <div class="ul-photo-card-plus">45P+1V</div>
        </div>
      </div>
    </div>
  </div>
</fieldset>