Js利用sort方法 实现图片的正 ,倒序和随机排序
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,p{padding: 0;margin: 0;}
ul,li{list-style: none;}
#box{width: 1000px;height: 600px;border: 1px solid #000;margin: 50px auto;text-align: center;position: relative;}
input{ margin-top: 30px; width: 100px; height: 30px;line-height: 30px; border: 1px solid #ccc;background: #009999;color: #fff;outline: none;}
ul{width: 1000px; height: 500px;top: 100px;position: absolute;background: #fff;}
ul li{width: 240px; height: 250px;float: left;padding: 0 5px 10px 5px;}
ul li img{width: 240px;height: 200px;vertical-align: top;}
p{background: #ccc;height: 30px; line-height: 30px; color: #006598;font-weight: bold;}
</style>
</head>
<body>
<div id="box">
<input type="button" value="从大到小" />
<input type="button" value="打乱顺序" />
<ul>
<li>
<img src="img/1.jpg" alt="">
<p>1 - 言叶之庭01</p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
<script>
var aLi = document.getElementsByTagName('li');
var aInp = document.getElementsByTagName('input');
var json = {
'Url' : ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg'],
'title' : ['1 - 言叶之庭01','2 - 言叶之庭02','3 - 言叶之庭03','4 - 言叶之庭04','5 - 言叶之庭05','6 - 言叶之庭06','7 - 言叶之庭07','8 - 言叶之庭08']
};
aInp[0].onoff=true
var num = [0,1,2,3,4,5,6,7];
var oImg=document.getElementsByTagName("img")
var oP=document.getElementsByTagName("p")
//初始化
for (var i=0;i<aLi.length;i++) {
oImg[i].src=json.Url[i]
oP[i].innerHTML=json.title[i]
}
//从大到小
aInp[0].onclick=function(){
if(this.onoff){
num.sort(function(a,b){
return b-a
})
this.value="从小到大"
for (var i=0;i<aLi.length;i++) {
oImg[i].src=json.Url[num[i]]
oP[i].innerHTML=json.title[num[i]]
}
console.log(num)
aInp[0].onoff=false
}else{
//从小到大
num.sort(function(a,b){
return a-b
})
this.value="从大到小"
for (var i=0;i<aLi.length;i++) {
oImg[i].src=json.Url[num[i]]
oP[i].innerHTML=json.title[num[i]]
}
console.log(num)
aInp[0].onoff=true
}
}
//打乱顺序
aInp[1].onclick=function(){
num.sort(function(a,b){
return Math.random()-0.5
})
for (var i=0;i<aLi.length;i++) {
oImg[i].src=json.Url[num[i]]
oP[i].innerHTML=json.title[num[i]]
}
console.log(num)
}
</script>
</body>
</html>