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

源码下载

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