需求
來自於移動端web需要一個樹狀圖藻烤,但分支有些內(nèi)容多,有些內(nèi)容少,就會呈現(xiàn)“缺失”的狀態(tài)隙咸,如下:
原因
其原因是因爲各層連接綫是由方塊的偽類+div的border實現(xiàn)的沐悦,所以如果樹狀圖中各個方塊的高度不一,就會出現(xiàn)中間的“缺失”五督。并且如果樹狀圖的每個方塊高度一致藏否,整個圖也會顯得較爲美觀。
但是方塊的高度不能寫死充包,如果後期需要修改方塊裏的內(nèi)容或是增加內(nèi)容副签,寫死將會給修改帶來麻煩。由於CSS無法自動計算方塊的高度基矮,所以用jQuery來計算淆储。
思路
高度保持一致,指的是每層方塊的高度一致家浇,無需整個樹狀圖高度一致本砰。
1、首先钢悲,讀出所需層的每個方塊的高度值(現(xiàn)高度是由方塊內(nèi)容撐開的)点额;
2、其次莺琳,將第一個方塊的高度值作爲這層中所有方塊中的最高高度max还棱;
3、再者惭等,將每個方塊的高度值代入珍手,判斷代入的高度值是否大於max;
4咕缎、如果大於max珠十,將此高度值取代原來max的值,如果小於凭豪,則不計焙蹭;
5、最後嫂伞,將max作爲所需層所有方塊的高度值孔厉。
代碼
<script type="text/javascript">
$(function(){
//設(shè)一個變量b為所需層的所有方塊
var b = $(".two").children(".list-square").children(".element"),
//設(shè)方塊最高值max一開始等於0
max = 0;
b.each(function(){
//判斷代入高度值是否大於max
if($(this).height() > max) {
//大於則取代原max的值
max = $(this).height();
}
});
//所需層方塊高度皆爲max
b.height(max);
});
</script>
入門學(xué)習(xí)所用,僅限于個人練習(xí)帖努。