DOM排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.button{
height:50px;
width: auto;
line-height: 50px;
padding-left:50px;
}
.button span{
width:40px;
height:30px;
line-height: 30px;
text-align: center;
cursor: pointer;
background: #666;
color:#fff;
margin:10px 30px;
padding:10px;
}
ul{
overflow: auto;
list-style: none;
margin:0;
text-align: center;
line-height: 80px;
width:320px;
}
ul li{
float:left;
width:80px;
height:80px;
position: relative;
margin-bottom: 50px;
}
li span{
position: absolute;
top:70px;
left:20%;
background: #ddd;
border-radius: 5px;
padding:0 5px;
line-height: 1.5;
}
li em{
width:100%;
height:100%;
display: block;
font-style: normal;
}
em.pic1{
background: #de8ac6;
}
em.pic2{
background: #e49d97;
}
em.pic3{
background: #e7e27a;
}
em.pic4{
background: #73c9a4;
}
em.pic5{
background: #5b87f0;
}
em.pic6{
background: #9e69ff;
}
em.pic7{
background: #f98bae;
}
em.pic8{
background: #de8ac6;
}
</style>
</head>
<body>
<p class="button" >
<span id="btn1" onclick="normal()">從大到小</span>
<span id="btn2" onclick="random()">亂序</span>
</p>
<ul id="picWrap">
<li ><em class="pic1">一</em><span>第1個</span></li>
<li ><em class="pic2">二</em><span>第2個</span></li>
<li ><em class="pic3">三</em><span>第3個</span></li>
<li ><em class="pic4">四</em><span>第4個</span></li>
<li ><em class="pic5">五</em><span>第5個</span></li>
<li ><em class="pic6">六</em><span>第6個</span></li>
<li ><em class="pic7">七</em><span>第7個</span></li>
<li ><em class="pic8">八</em><span>第8個</span></li>
</ul>
</body>
</html>一、不操作DOM的JS實現
<script type="text/javascript">
//初始化變量
var $picWrap=document.getElementById('picWrap');
var $li=$picWrap.getElementsByTagName('li')
var $pics=$picWrap.getElementsByTagName('img');
var $tags=$picWrap.getElementsByTagName('span');
//定義並初始化數組用於存儲img和span的內容(這部分變量也可以不從頁面獲取，直接定義成靜態變量)
var $data=[],$dataRadom=[];
for(var i=0;i<$li.length;i++){
$data.push({'src':$pics[i].getAttribute('src'),'tag':$tags[i].innerHTML})
$dataRadom.push({'src':$pics[i].getAttribute('src'),'tag':$tags[i].innerHTML})
}
//從大到小排序
function normal(){
for(var i=0;i<$data.length;i++){
$pics[i].setAttribute('src',$data[i].src);
$tags[i].innerHTML=$data[i].tag;
}
}
//隨機排序
function random(){
$dataRadom.sort(randomSort);
for(var i=0;i<$dataRadom.length;i++){
$pics[i].setAttribute('src',$dataRadom[i].src);
$tags[i].innerHTML=$dataRadom[i].tag;
}
}
//利用數組sort方法對數組進行隨機排序
function randomSort(a, b) {
return Math.random() > 0.5 ? -1 : 1;
}
</script>二、操作DOM的實現
<script type="text/javascript">
//初始化變量
var $picWrap=document.getElementById('picWrap');
var $pics=$picWrap.getElementsByTagName('li');
//定義並初始化數組用於存儲li的內容
var $htmls=[],$htmlsInit=[];
for(var i=0;i<$pics.length;i++){
$htmls.push($pics[i].innerHTML)
$htmlsInit.push($pics[i].innerHTML)
}
//DOM操作（從大到小排序）
function normal(){
$picWrap.innerHTML="";
for(var i=0;i<$htmls.length;i++){
$picWrap.innerHTML+='<li>'+$htmls[i]+'</li>';
}
}
//DOM操作（隨機排序）
function random(){
var $htmlsRadom=$htmlsInit.sort(randomSort);
$picWrap.innerHTML="";
for(var i=0;i<$htmlsRadom.length;i++){
$picWrap.innerHTML+='<li>'+$htmlsRadom[i]+'</li>';
}
}
//利用數組sort方法對數組進行隨機排序
function randomSort(a, b) {
return Math.random() > 0.5 ? -1 : 1;
}
</script>
