js--手机头像点击显示按钮的位置自适应

Posted 2020-10-07 _江江江江

在手机页面的中，头像显示的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();
        });

　

这个功能效果图如下

点击前

点击后

 在点击就还是隐藏