html5+css3+js开发APP实例教程2 -- 图片/图标列表

不多说直接先上实例。

所有实例在后续成品将会用到。

如果有需要讲添加具体文字说明。

**************************** 

1、图片列表

效果

<div class="tempbox">
  <ul id="imagelist">
      <li><img src="images/01.jpg" width="96px" /></li>
      <li><img src="images/02.jpg" width="96px" /></li>
      <li><img src="images/03.jpg" width="96px" /></li>
      <li><img src="images/04.jpg" width="96px" /></li>
      <li></li>

      <li><img src="images/06.jpg" width="96px" /></li>
      <li><img src="images/07.jpg" width="96px" /></li>
      <li><img src="images/08.jpg" width="96px" /></li>
      <li><img src="images/09.jpg" width="96px" /></li>
      <li><img src="images/010.jpg" width="96px" /></li>

      <li><img src="images/02.jpg" width="96px" /></li>
      <li></li>
      <li><img src="images/03.jpg" width="96px" /></li>
      <li><img src="images/04.jpg" width="96px" /></li>
      <li><img src="images/05.jpg" width="96px" /></li>
  </ul>
</div>

 

#imagelist li{
  width: 96px;
  height: 96px;
  overflow: hidden;
  margin-left: 8px;
  margin-top: 8px;
  float: left;
  border-bottom: 1px solid #eee;
  background: #f2f3f5 url(img.png) no-repeat center center;
  box-shadow:3px 3px 3px rgba(0,0,0,.2);
}
#imagelist li img{
  width: 96px;
}

 

2、瀑布流

效果

<div class="tempbox">
  <div id="imagelistpbl">
    <p><img src="images/01.jpg" width="96px" /></p>
    <p><img src="images/02.jpg" width="96px" /></p>
    <p><img src="images/03.jpg" width="96px" /></p>
    <p><img src="images/04.jpg" width="96px" /></p>
    <p><img src="images/05.jpg" width="96px" /></p>
    <p><img src="images/06.jpg" width="96px" /></p>
    <p><img src="images/07.jpg" width="96px" /></p>
    <p><img src="images/08.jpg" width="96px" /></p>
    <p><img src="images/09.jpg" width="96px" /></p>
    <p><img src="images/010.jpg" width="96px" /></p>
    <p><img src="images/01.jpg" width="96px" /></p>
    <p><img src="images/02.jpg" width="96px" /></p>
    <p><img src="images/03.jpg" width="96px" /></p>
    <p><img src="images/04.jpg" width="96px" /></p>
    <p><img src="images/05.jpg" width="96px" /></p>
    <p><img src="images/06.jpg" width="96px" /></p>
    <p><img src="images/07.jpg" width="96px" /></p>
    <p><img src="images/08.jpg" width="96px" /></p>
    <p><img src="images/09.jpg" width="96px" /></p>
    <p><img src="images/010.jpg" width="96px" /></p>
</div>
</div>

 

#imagelistpbl {
    width:304px;
    margin-top: 8px;
    margin-left: 8px;
    -webkit-column-count:3;
     -moz-column-count:3;
         column-count:3;
    }
#imagelistpbl p{background: #f2f3f5; margin-bottom: 8px;}
#imagelistpbl p img{width: 96px;}

 

3、图标列表

<div class="tempbox">
  <div id="icoimglist">
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>

    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>

    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
    <li><p><img src="images/ico01.png" /></p><span>栏目一</span></li>
  </div/>
</div>

 

#icoimglist li{
 width: 80px; height: 80px;
 float: left;
 text-align: center;
  margin-top: 10px;
}
#icoimglist li p{
  width: 56px;height: 56px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow:3px 3px 3px rgba(0,0,0,.3);
}
#icoimglist li span{
  font-size: 12px;
 color: #b1b1b1;
  display: block;
  height: 24px;
  line-height: 24px;
}

*************************************

DEMO

源码下载

*************************************