在手機頁面的中，頭像顯示的div，第一行的最後一個為點擊顯示更多的按鈕（more），因為手機寬度的大小不一致，所以每行顯示的頭像個數也不一致，more按鈕的位置總是固定在最後一排，所以需要通過計算屏幕寬度的大小，然後根據每個li的大小算出一行中最多能放幾個，然後在將more通過js插入，如下圖

iPhone5 顯示如下：

iPhone6 顯示如下：

一下貼代碼：

HTML

<div class="pic">
        <ul>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></li>
            <li><img src="img/d.png" /></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();
        });

這個功能效果圖如下

點擊前

點擊後

在點擊就還是隱藏

js--手機頭像點擊顯示按鈕的位置自適應