在手机页面的中,头像显示的div,第一行的最后一个为点击显示更多的按钮(more),因为手机宽度的大小不一致,所以每行显示的头像个数也不一致,more按钮的位置总是固定在最后一排,所以需要通过计算屏幕宽度的大小,然后根据每个li的大小算出一行中最多能放几个,然后在将more通过js插入,如下图
iPhone5 显示如下:
iPhone6 显示如下:
一下贴代码:
HTML
<div class="pic">
<ul>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li><img src="img/d.png" alt=""/></li>
<li class="last"></li>
</ul>
</div>
CSS
.pic{
height: 100px;
overflow: hidden;
}
.pic ul{
padding: 0 20px;
}
.pic ul li{
width: 60px;
height: 60px;
margin: 20px 10px 20px 15px;
float: left;
border-radius: 50%;
text-align: center;
line-height: 55px;
}
.pic ul li img {
padding: 0;
}
.pic li.more{
margin-right: 0px;
background: url(img/more.png) no-repeat center center;
}
.pic li.last{
background: url(img/more.png) no-repeat center center;
}
js代码
function loadPage(){
var clientW = $(window).width();
/*===================*/
/*===================*/
/*===================*/
$(".last").hide();//设置最后一个点击为收起头像框
//设置.more的位置, 根据不同的宽度设置起位置
/*===================*/
/*===================*/
var lis =$(".pic").find("li").length;
//如果所有的li
var index = parseInt((clientW-70)/80);//一行能装多少个, 在此基础上-1 表示一行中的左后一位置
// alert($(".pic ul"));
if(index < lis){
$(".pic").find("li").eq(index-1).before("<li class='more'></li>");//关键,精髓所在
}
}
$(".more").click(function(){//点击显示
$(".last").show();
$(".pic").css("overflow", "visible");
$(".pic ul").css("padding-right", "0");
$(this).hide();
});
$(".last").click(function(){//点击隐藏
$(".pic").css("overflow", "hidden");
$(".more").show();
$(".pic ul").css("padding-right", "20px");
$(this).hide();
});
这个功能效果图如下
点击前
点击后
在点击就还是隐藏