效果图:
注: 全屏模式下图片的自动填充还没有完善
注:半屏模式下图片会自动填充,出现页面奔溃现象时多刷新几次
css代码:
* {
margin: 0;
padding: 0;
}
#main {/*整体相对定位,因为每个小盒子的位置是通过计算再由绝对定位放置,是需要相对于main盒子*/
position: relative;
}
.box {
padding: 15px 0 0 15px;/*后面js获取的高度包括padding的距离*/
float: left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img {
width: 165px;
height: auto;
}
html代码:[代码过于重复,以后有时间再回来完善]
<div id="main">
<div class="box">
<div class="pic">
<img src="../img/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="../img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="../img/2.jpg"/>
</div>
</div>
<div class="box">