原生js製作標題與內容保持4行的效果

在製作網頁或移動端有時會用到一個效果，類似文章標題和文章描述的排列總是保持一樣的行數，要麼標題總是一行，多出的省略，要麼標題內容1：3或2：2或3：1這樣，今天練習這樣的效果。

實現的原理：給標題和內容分別加上行高，獲取標題的高度除以自身的行高，得知標題的行數，再分配內容的行數即可。

<style>
	*{padding: 0;margin: 0; font-family: 'Microsoft Yahei'}
	.book{
		width: 320px;
		border: 1px solid #ccc;
	}
	.bookli{
		padding: 5px 10px;
		border-bottom: 1px solid #ccc;
	}
	.bookdiv{
		width: 300px;
		overflow: hidden;
	}
	.title{
		color:#666;
		margin: 10px 0;
		line-height: 23px;   //標題的行高
	}
	.desc{
		line-height: 23px;   //內容的行高
		overflow: hidden; 
	}
</style>

<h2>十大名花排行榜</h2>
<div class="book">
	<ul>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，別名：茉莉，拉丁文名：木犀科、素馨屬直立或攀援灌木，高達3米。小枝圓柱形或稍壓扁狀，有時中空，疏被柔毛。葉對生，單葉，葉片紙質，圓形、橢圓形、卵狀橢圓形或倒卵形，兩端圓或鈍，基部有時微心形，在上面稍凹入或凹起，下面凸起，細脈在兩面常明顯，微凸起，除下面脈腋間常具簇毛外，其餘無毛；裂片長圓形至近圓形，先端圓或鈍。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，別名：茉莉，拉丁文名：木犀科、素馨屬直立或攀援灌木，高達3米。小枝圓柱形或稍壓扁狀，有時中空，疏被柔毛。葉對生，單葉，葉片紙質，圓形、橢圓形、卵狀橢圓形或倒卵形，兩端圓或鈍，基部有時微心形，在上面稍凹入或凹起，下面凸起，細脈在兩面常明顯，微凸起，除下面脈腋間常具簇毛外，其餘無毛；裂片長圓形至近圓形，先端圓或鈍。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，別名：茉莉，拉丁文名：木犀科、素馨屬直立或攀援灌木，高達3米。小枝圓柱形或稍壓扁狀，有時中空，疏被柔毛。葉對生，單葉，葉片紙質，圓形、橢圓形、卵狀橢圓形或倒卵形，兩端圓或鈍，基部有時微心形，在上面稍凹入或凹起，下面凸起，細脈在兩面常明顯，微凸起，除下面脈腋間常具簇毛外，其餘無毛；裂片長圓形至近圓形，先端圓或鈍。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，別名：茉莉，拉丁文名：木犀科、素馨屬直立或攀援灌木，高達3米。小枝圓柱形或稍壓扁狀，有時中空，疏被柔毛。葉對生，單葉，葉片紙質，圓形、橢圓形、卵狀橢圓形或倒卵形，兩端圓或鈍，基部有時微心形，在上面稍凹入或凹起，下面凸起，細脈在兩面常明顯，微凸起，除下面脈腋間常具簇毛外，其餘無毛；裂片長圓形至近圓形，先端圓或鈍。果球形，呈紫黑色。</p>
			</div>
		</li>
	</ul>
</div>

window.onload=function(){
	//兼容不能使用getElementsByClassName的瀏覽器
	function getClass(clas){
		var cls=document.getElementsByTagName('*');
		var arr=[];
		for(var i=0;i<cls.length;i++){
			if(clas==cls[i].className){
				arr.push(cls[i]);
			}
		}
		return arr;
	}
　　　　//控制行數的函數
	function controlRow(title,content){
		var title=getClass(title);
		var desc=getClass(content);
		var titleheight;
		var descheight;
		for(var j=0;j<title.length;j++){
			(function(index){
				// 獲取css樣式
				if(window.getComputedStyle!="undefined"){  //兼容火狐、谷歌等主流瀏覽器
					titleheight=window.getComputedStyle(title[index],null)['line-height'];
					descheight=window.getComputedStyle(desc[index],null)['line-height'];
				}else{   //兼容ie瀏覽器
					titleheight=title[index].currentStyle['line-height'];
					descheight=desc[index].currentStyle['line-height'];
				}
				var titleH=titleheight.substr(0,titleheight.length-2);
				var descH=descheight.substr(0,descheight.length-2);
				// 如果標題高度=行高，那麼內容高度則是內容行高的3倍，內容+標題總是保持4行
				if(title[index].offsetHeight/titleH==1){
					desc[index].style.height=3*descH+'px';
				}else if(title[index].offsetHeight/titleH==2){
					desc[index].style.height=2*descH+'px';
				}else if(title[index].offsetHeight/titleH==3){
					desc[index].style.height=1*descH+'px';
				}else{
					alert("sorry,瀏覽器不兼容");
				}
			})(j);
		}
	}
	controlRow('title','desc');
}

測試了谷歌和火狐。ie被我卸了一個文件，打不開。所以沒測試。有測試的朋友也可以告訴我一聲，謝啦。