图片排序

<div class="box">        
	<p>
		<a href="javascript:;">从大到小</a>
		<a href="javascript:;" style="display: none;">从小到大</a>
		<a href="javascript:;">打乱顺序</a>
	</p>
	<ul></ul>
</div>

CSS

html,body{
	 100%;
	height: 100%;
	background: #ccc;
}
*{
	margin: 0;
	padding: 0;
}
.box{
	 910px;
	margin: 0 auto;
}
.box p{
	text-align: center;
}
.box a{
	display: inline-block;
	 100px;
	height: 30px;
	background: #019F62;
	color: #fff;
	line-height: 30px;
	text-decoration: none;
	margin: 20px 0;
}
.box ul:after{
	display: block;
	content: "";
	clear: both;
}
.box li{
	padding: 5px 10px;
	float: left;
	background: #fff;
	list-style: none;
	margin-left: 10px;
	position: relative;
}
.box li:nth-of-type(1),
.box li:nth-of-type(5){
	margin-left: 0;
}
.box li img{
	 200px;
	height: 100px;
	vertical-align: top;
}
.box li p{
	font-size: 16px;
	font-weight: bold;
	color: #069;
	line-height: 30px; 
}
.box li div{
	background: #C0C0C0;
}
.box li:after{
	position: absolute;
	content: "";
	 100%;
	height: 100%;
	background:rgba(225,225,225,.2);
	top: 0;
	left: 0;
}
.box .act:after{
	background:rgba(225,225,225,0);
}

JS

var aBtn=document.getElementsByTagName("a");
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li");
var imgArry=[
	["img/1.jpg","1-图片一"],
	["img/2.jpg","2-图片二"],
	["img/3.jpg","3-图片三"],
	["img/4.jpg","4-图片四"],
	["img/5.jpg","5-图片五"],
	["img/6.jpg","6-图片六"],
	["img/7.jpg","7-图片七"],
	["img/8.jpg","8-图片八"]
]
//页面初始化

function fn(){
	oUl.innerHTML=null;
	for (var i=0;i<imgArry.length;i++) {
		oUl.innerHTML+="<li><div><img src='"+imgArry[i][0]+"'/><p>"+imgArry[i][1]+"</p></div></li>";
	}
}
fn();


//鼠标移入遮罩层消失
for (var i=0;i<aLi.length;i++) {
	aLi[i].onmouseover=function(){
		this.className="act";
	}
	aLi[i].onmouseout=function(){
		this.className="";
	}
}


//点击从大到小排序
aBtn[0].onclick=function(){
	//该按钮隐藏，另一个按钮显示，图片数组反转
	this.style.display="none";
	aBtn[1].style.display="inline-block";
	imgArry.reverse();
	fn();
}
//点击从小到大排序
aBtn[1].onclick=function(){
	//该按钮隐藏，另一个按钮显示，图片数组反转
	this.style.display="none";
	aBtn[0].style.display="inline-block";
	imgArry.reverse();
	fn();
}
//点击打乱顺序
aBtn[2].onclick=function(){
	var arr=[];
	for (var i=0;i<aLi.length;i++) {
		arr.push(aLi[i]);
	}
	arr.sort(function(a,b){
		return Math.random() - 0.5;	
	})
	oUl.innerHTML=null;
	for (var i=0;i<arr.length;i++) {
		oUl.innerHTML+="<li>"+arr[i].innerHTML+"</li>";
	}
}