用数组方法做的图片排序效果

最新推荐文章于 2022-12-13 14:25:50 发布

liang_star

最新推荐文章于 2022-12-13 14:25:50 发布

阅读量965

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/liang_star/article/details/53708770

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	#body{
	border:1px solid #000000;
	width:615px;
	height:232px;
	margin:30px auto;
		}
	#head{
	background:#706565;
	text-align:center;
		}
		#head >input{
				margin:0  50px;
			}
	ul,li{
		margin:0;
		padding:0;
		}
		#list{
			position:relative;
			}
		li{
			display:inline-block;
			list-style:none;
			background:#A75C5E;
			width:150px;
			height:100px;
			line-height:100px;
			font-size:40px;
			color:#F8F2F2;
			text-align:center;
			position:absolute;
			}
</style>
<script>
	window.οnlοad=function(){
			var list=document.getElementById("list");
			var aInp=document.getElementsByTagName('input');
			var str='';
			for( var i=1; i<9;i++){
					str+='<li>'+i+'</li>';
				}
			list.innerHTML=str;
			var aLi=list.getElementsByTagName('li');
			for( var j=0;j<aLi.length/2;j++){
					aLi[j].style.top=0+'px';
					aLi[j].style.left=(150+5)*j+'px';
				}
			var y=0;
			for( var x=aLi.length/2;x<aLi.length;x++){
					aLi[x].style.top=105+'px';
					aLi[x].style.left=(150+5)*y+'px';
					y++;
			}
			var arrWZ=[];
			var arrindex=[];
			for(var a=0; a<aLi.length;a++){
					arrWZ.push([aLi[a].offsetLeft,aLi[a].offsetTop]);
					arrindex.push(a);
				}
			var onoff=true;
			aInp[0].οnclick=function(){
						if(onoff){
									arrindex.sort(function(a,b){return b-a});
							for(var b=0;b<aLi.length;b++){
										aLi[b].style.left=arrWZ[arrindex[b]][0]+'px';
										aLi[b].style.top=arrWZ[arrindex[b]][1]+'px';
								}
									aInp[0].value='从小到大';
							}else{
									arrindex.sort(function(a,b){return a-b});
							for(var b=0;b<aLi.length;b++){
										aLi[b].style.left=arrWZ[arrindex[b]][0]+'px';
										aLi[b].style.top=arrWZ[arrindex[b]][1]+'px';
								}
									aInp[0].value='从大到小';
							}	
						onoff=!onoff;		
				}			//从大到小，从小到大
				aInp[1].οnclick=function(){
						arrindex.sort(function(a,b){
								return Math.random()-0.5;
							})
						for( var c=0;c<aLi.length;c++){
								aLi[c].style.left=arrWZ[arrindex[c]][0]+'px';
								aLi[c].style.top=arrWZ[arrindex[c]][1]+'px';
							}
					}		//打乱排序
		}
</script>
<body>
<div id='body'>
    <div id="head">
        <input type="button" value="从大到小">
        <input type="button" value="打乱排序">
    </div>
    <ul id='list'>
    
	</ul>
</div>    
</body>
</html>

liang_star

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用数组方法做的图片排序效果

无标题文档 #body{ border:1px solid #000000; width:615px; height:232px; margin:30px auto; } #head{ background:#706565; text-align:center; } #head >input{ margin:0 50px; } ul,li{ m
复制链接

扫一扫