本文内容转自“东软睿道”培训内容。

首先我们画出基本的内容，我们需要一个标题的部分然后是一个展开的按钮，这里简化为一个加号

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="CSS/testjs3.css">
	<script type="text/javascript" src="js/testjs3.js"></script>
</head>
<body>
	<p>更多产品<span id="signal" class="" οnclick="showproduct();">+</span></p>
	<div id="product" class="product">
		<div class="divouter">
				<img src="p_w_picpaths/2.jpg">
				<div class="ribbon"></div>
		</div>
		<div class="divouter">
			<img src="p_w_picpaths/Sunset.jpg">
			<div class="ribbon"></div>
		</div>
	
		<div class="divouter">
			<img src="p_w_picpaths/3.jpg">
			<div class="ribbon"></div>
		</div>
	
		<div class="divouter">
			<img src="p_w_picpaths/Winter.jpg">
			<div class="ribbon"></div>
		</div>
	
		<div class="divouter">
			<img src="p_w_picpaths/zjn.jpg">
			<div class="ribbon"></div>
		</div>
		<div class="divouter">
			<img src="p_w_picpaths/zjnxz.jpg">
			<div class="ribbon"></div>
		</div>
	</div>
</body>
</html>

然后我们设置一下根据屏幕大小显示几张图片：

/*屏幕像素大于1024时*/
@media screen and (min-width: 1024px)
{
	div.divouter
	{
	float: left;
	width: 30%;/*设置宽度的时候要考虑给margin留下空间*/
	margin: 1%;
	position: relative;
	}
}
/*屏幕像素介于1024 768*/
@media screen and (max-width: 1024px) and (min-width: 768px)
{
	div.divouter
	{
	float: left;
	width: 45%;
	margin: 2%;
	position: relative;
	}
}
/*屏幕像素小于768*/
@media screen and (max-width: 768px)
{
	div.divouter
	{
	float: left;
	width: 95%;
	margin: 2%;
	position: relative;
	}
}

div.divouter img
{
	width: 100%;
	opacity: 0.9;
}
div.ribbon
{
	width: 100%;
	height: 15px;
	background-color: orange;
	position: absolute;
	top: 0;
	display: none;
}
div.divouter:hover div.ribbon
{
	display: block;
}
div.product
{
	height: 0px;
	overflow: hidden;/*如果子元素超出我的范围了，则超出部分不显示*/
}

最后是通过JS实现缓慢下拉和收起的效果，当然是通过定时的递归调用自己。

function showproduct()
{
	var productCtrl=document.getElementById("product");
	var span=document.getElementById("signal");
	if (productCtrl.offsetHeight>=700) {
		// productCtrl.style.height="0px";
		span.innerHTML="+";
		var taskid=setInterval(function(){
			//1.得到高度是什么height的值
			// var height=productCtrl.style.height;//11px 字符串所以不用这种方式
			if (productCtrl.offsetHeight==1) {
						//3.height==500的时候，清除循环任务
						clearInterval(taskid);
			}else
			{
				//2.height+1，设置到height属性上
				productCtrl.style.height=(productCtrl.offsetHeight-1.2)+"px";
			}
		},1);
	}else
	{
		    span.innerHTML="&times;";
			var taskid=setInterval(function(){
			//1.得到高度是什么height的值
			// var height=productCtrl.style.height;//11px 字符串所以不用这种方式
			if (productCtrl.offsetHeight>=700) {
						//3.height==500的时候，清除循环任务
						clearInterval(taskid);
			}else
			{
				//2.height+1，设置到height属性上
				productCtrl.style.height=(productCtrl.offsetHeight+1.2)+"px";
			}
		},1);
	}
}

注意上面js代码中的收起效果的临界值，应该为1，如果用带有小数去减一个数，不保证可以减到0，当然，我们减不出一个高度是负的，所以就会出现卡住的现象。所以建议小于1像素就可以。