效果：倒金字塔型效果
效果圖：

要求：
1.左邊選中的內(nèi)容放到右邊金字塔中（追加到右側(cè)）；
2.右邊的內(nèi)容不可重復
3.刪除后，新加入的元素要根據(jù)之前元素情況重新排序，不能打亂倒金字塔效果（如果上面比較短，新追加的比較長，新加的要放到短的上面）

刪除部分后，1，3為新加入的，要實現(xiàn)的效果順序為：1，2，3，4，5

本來是想根據(jù)div的背景位置做比較，但最后沒能拿到，問題3就一直沒解決掉，有沒有js厲害的朋友給幫忙解決一下，小妹在此先謝過，抱拳?。?！

說明：每列的梯形是用背景圖做的，每個相差31px。
部分代碼：
<div class="FL selectedTag">

                        <h3 class="titles">選中標簽</h3>
                        <ul>
                            <li class="tags relative" flag="0" style="background-position-y: -93px;"><div class="centerDiv" aval="dc_digital_apptype：2" title="APP偏好：微信">APP偏好：微信</div><span class="absolute close" style="right: 29px;">x</span></li><li class="tags relative" flag="1" style="background-position-y: -155px;"><div class="centerDiv" aval="dc_digital_databand：D" title="手機流量：1-5MB">手機流量：1-5MB</div><span class="absolute close" style="right: 41px;">x</span></li><li class="tags relative" flag="2" style="background-position-y: -155px;"><div class="centerDiv" aval="dc_digital_resident：livingORworking" title="常駐：居住和工作">常駐：居住和工作</div><span class="absolute close" style="right: 41px;">x</span></li><li class="tags relative" flag="3" style="background-position-y: -93px;"><div class="centerDiv" aval="dc_digital_sex：B" title="性別：女">性別：女</div><span class="absolute close" style="right: 29px;">x</span></li><li class="tags relative" style="background-position-y: -124px;"><div class="centerDiv" aval="dc_digital_hascar：A" title="是否車主：是">是否車主：是</div><span class="absolute close" style="right: 35px;">x</span></li><li class="comNum">
                                <div class="comNumCon ml_10 FL">當前可操作人數(shù) <b>0人</b></div>
                                <button id="countPeople" class="FL t_c LH30 ml_10 medium_btn border_btn_blue borderRadius colorDefault" style="background-color: #6CA9FC">計算人數(shù)
                                </button>
                            </li>
                        </ul>
                    </div>
                    
                    

.selectedTag{

width: 300px;

}
.tags,.comNum{

margin-bottom: 2px;
width: 300px;
height: 30px;
color: #8f9eb2;
font-size: 12px;

}
.tags{

background: url("../images/tagBg.png") no-repeat;
background-position-x: 0px;

}
.comNumCon{

width: 180px;
margin-bottom: 2px;
height: 30px;
font-size: 12px;
color: #ffffff;
background: url("../images/tagBg.png") no-repeat -52px -301px;

}
.comNumCon b{

font-size: 14px;
font-weight: 900;

}

.tags:nth-last-child(2){

margin-bottom: -2px;

}

.close{

width: 16px;
height: 16px;
top:7px;
font-size: 12px;
font-weight: lighter;
background-color: #ffffff;
border-radius: 50px;
color: #bfcad6;
text-align: center;
line-height: 14px;
cursor: pointer;
/*background: url("../images/close20.png") no-repeat 0 0;*/

}
.tags div,.comNum div{

width: 180px;
text-align: center;
height: 100%;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}