递减间距排列头像

先上图预览下最终效果

大概就是这个意思，从右往左排列，早进来的用户头像随着用户数越来越多渐渐叠加在一起

但最右边的四个头像保持固定间距

例如我们有如下头像列表html

<div class="statistics users jcarousel-wrapper top-left">
    <ul class="user-list list-inline mb-0" style="display: block;">
        <li><img src="../images/avatars/16.jpg" alt=""></li>
        <li><img src="../images/avatars/17.jpg" alt=""></li>
        <li><img src="../images/avatars/18.jpg" alt=""></li>
        <li><img src="../images/avatars/19.jpg" alt=""></li>
        <li><img src="../images/avatars/20.jpg" alt=""></li>
        <li><img src="../images/avatars/21.jpg" alt=""></li>
    </ul>
</div>

var user_count = $('.user-list li').length; // 或按自己业务逻辑获取用户头像个数即可

// 递减间距排列头像
setTimeout(function() {
    // 列表总宽度
    var w = $('.statistics.users').width();

    // 递减变量初始值
    var sin = w;
    var y = 0;
    // 遍历总头像数
    for (var i = user_count; i > 0; i--) {
        // 一般情况采用越晚进来用户头像越往右排列，且每个头像之间的间距越大
        var temp = sin-sin/2;
        // 但当每个头像之间间距超过40时，或总头像数大于8且最近3个，才保持最小间距为40
        if(temp>40 || (y < 2 && user_count > 8))
        {
            sin = sin - 40;
        }else{
            // 其它情况递减间距
            sin = temp;
        }
        $('.user-list li:nth-child('+i+')').css('left',sin+'px');
        y++;
    }
    $(".user-list").fadeIn();

}, 200);

大概就是这样，间距 sin-sin/2 每次缩减一半间距，按需自己调即可