js--Mobile Avatar Click on the display button position Adaptive

In the mobile page, the Avatar Display Div, the last of the first line to click to show more Buttons (more), because the phone width of the size of the inconsistent, so the number of images per row is not consistent, the position of the more button is always fixed in the last row, so you need to calculate the size of the screen width, Then according to the size of each Li to calculate the maximum number of rows can be placed, and then the more through JS inserted, such as

IPhone5 displays as follows:

IPhone6 displays as follows:

A bit of sticker code:

Html

<div class= "pic" >        <ul>            <li></li>            <li>< IMG src= "img/d.png"/></li>            <li></li>            <li></li>            <li></li> <li></li>            <li></li> <li></li>            <li></li> <li></li>            <li></li> <li></li>            <li></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 Code

function LoadPage () {var clientw = $ (window). width (); /*===================*//*===================*//*===================*/$ (". Last"). Hide (); Set the last click to close the Avatar frame//settings. More position, depending on the width of the set up position/*===================*//*===================            */var lis =$ (". Pic"). Find ("Li"). length; If all of the li var index = parseint ((clientW-70)/80);//How many rows can be loaded on this basis-1 represents the left and last position in a row//alert ($ (". Pic ul")            );             if (Index < LIS) {$ (". Pic"). Find ("Li"). EQ (index-1). Before ("<li class= ' more ' ></li>");//Key, Essence            }}$ (". more"). Click (function () {//Click to display $ (". Last"). Show ();            $ (". Pic"). CSS ("Overflow", "visible");            $ (". Pic ul"). CSS ("padding-right", "0");        $ (this). Hide ();        });            $ (". Last"). Click (function () {//Click Hide $ (". Pic"). CSS ("Overflow", "hidden");            $ (". more"). Show (); $(". pic ul "). CSS (" Padding-right "," 20px ");        $ (this). Hide (); });

　

This function is as follows

Before clicking

After clicking

Click on it or hide it

js--Mobile Avatar Click on the display button position Adaptive