js 模仿windows 桌面图标排列算法

注：需要引入Jquery

如果需要全部功能，请引入jquery-ui和jquery-ui.css

截图：

js代码：

$(function() {
	
	//菜单列表
	var menu_list=$(".menu-list");
	
	//工作区
	var working=$(".working");
	
	working.click(function() {
		menu_list.hide();
		$(".content-menu").hide("slow");
	});
	
	//菜单图标单击
	$(".menu").bind("click",function() {
		menu_list.show();
		
	});

	arrange();
	
	$(window).resize(function() {
		arrange();
	});
	
	//屏蔽右键菜单
	$(document).contextmenu(function() {
		return false;
	});
	
	//点击工作区的时候 显示右键菜单
	$(".working").contextmenu(function(event) {
	
		var x=event.clientX;
		var y=event.clientY;
		var menu=$(".content-menu");
		
		//判断坐标
		var width=document.body.clientWidth;
		var height=document.body.clientHeight;
		
		x=(x+menu.width())>=width?width-menu.width():x;
		y=(y+menu.height())>=height-40?height-menu.height():y;
		
		//alert("可视高度："+height+",鼠标高度："+y);
		menu.css("top",y);
		menu.css("left",x);
		menu.show();
		
		
	});
	
	//content-menu
	$(".content-menu ul li").click(function() {
		var text=$(this).text();
		
		switch (text) {
		case "刷新":
			document.location.reload();
			break;
		case "退出登录":
			if(confirm("是否要退出登录？")){
				
			}
			break;
		default:
			break;
		}
		
		$(".content-menu").hide();
	});

});

//排列图标部分

function arrange(){
	var ul=$(".icons");
	var working=$(".working");
	//位置坐标
	var position={x:0,y:0,bottom:110,50,height:50,parent:{height:0,0},padding:{top:10,left:10,right:0,bottom:10}};
	
	position.parent.height=working.height()-40;
	position.parent.width=working.width();
	
	ul.find("li").each(function(index) {
		
		$(this).css("top",position.y+"px");
		$(this).css("left",position.x+"px");
		
		position.height=$(this).height();
		position.width=$(this).width();
		
		position.y=position.y+position.height+position.padding.bottom+position.padding.bottom;
		
		if(position.y>=position.parent.height-position.bottom){
			position.y=0;
			position.x=position.x+position.width+position.padding.left;
		}
	});
}

html代码：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GBK">
    <link rel="stylesheet" type="text/css" href="css/window.css">
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
	<script language="JavaScript" src="js/jquery-1.10.0.js"></script>
	<script language="JavaScript" src="js/jquery-ui.js"></script>
	<script language="JavaScript" src="js/window.js"></script>
  </head>
  
  <body>
  	
    	<div class="working">
    		
			<ul class="icons">
				
				<script>
					for (var i = 1; i <= 4; i++) {
						var html = "";
						html += '<li>';
						html += '<img src="images/'+i+'.gif">';
						html += '<div class="text">图标'+i+'</div>';
						html += '</li>';
						document.write(html);
					}
				</script>
			
			</ul>
			
    	</div>
		
		
		<div class="taskbar">
			<div class="menu-list">
				<ul>
					<li></li>
				</ul>
			</div>
			
			<div class="menu">
				
				<div class="menu-icon">
					<ul><li></li><li></li><li></li><li></li></ul>
				</div>
				
				<a href="javascript:;"></a>
			</div>
			
		</div>
		
		<div class="window" title="窗体">窗体</div>
		
	<div class="content-menu">
		<ul>
			<li><a href="javascript:;">刷新</a></li>
			<li><a href="javascript:;">设置</a></li>
			<hr/>
			<li><a href="javascript:;">帮助</a></li>
			<hr/>
			<li><a href="javascript:;">关于</a></li>
			<hr/>
			<li><a href="javascript:;">系统设置</a></li>
			<li><a href="javascript:;">退出登录</a></li>
		</ul>
	</div>
	
		
	<script>
		
		$(".icons li").mousemove(function(){
			$(this).addClass("icons-move");
		});
		
		$(".icons li").mouseout(function(){
			$(this).removeClass("icons-move");
		});
		
		$(".icons li").mousedown(function(){
			$(".icons li").removeClass("icons-focus");
			$(this).addClass("icons-focus");
			//改变当前的索引
			$(".icons li").css("z-index",0);
			$(this).css("z-index",1);
		});
		
		$(".icons li").dblclick(function(){
			alert("double click");	
		});
		
		//按键事件
		$(document).keyup(function(event){
			var UP=38;
			var DOWM=40;
			var ENTER=13;
				var elem=$(".icons-focus");
				
				if(elem.html()=="undefined")return;
				
				if (event.keyCode == UP) {
					$(".icons li").removeClass("icons-focus");
					elem.prev().addClass("icons-focus");
				}
				
				if(event.keyCode==DOWM){
					$(".icons li").removeClass("icons-focus");
					elem.next().addClass("icons-focus");
				}
				
			//回车打开选中的图标
			if(event.keyCode==ENTER){
				var open=$(".icons-focus");
				alert("ok enevt is enter");
			}
			
		});
		

		//图标拖拽
		$(".icons li").draggable();
		
		//注册resize事件
		 $(".window").draggable({containment: 'parent'});
		 $(".window").resizable({containment: 'parent'});
		 
	</script>
  </body>
  
</html>


CSS代码：

@CHARSET "UTF-8";
body, html {
    overflow: hidden;
    height: 100%;
     100%;
    margin: 0px;
    padding: 0px;
}

.working {
    height: 100%;
     100%;
    background-image: url("../images/untitled.png");
    background-repeat: no-repeat;
    background-color: rgb(235, 236, 238);
    padding: 20px;
}

.working ul {
    height: 100%;
    position: relative;
}

.working ul li {
    position: absolute;
    display: block;
     90px;
    height: 90px;
    text-align: center;
    margin: 0px 10px 10px 10px;
    float: left;
    border: inherit 1px inherit;
    overflow: hidden;
    cursor: pointer;
}

.taskbar {
    position: absolute;
    height: 35px;
    line-height: 35px;
     100%;
    bottom: 0px;
    background-color: #CCC;
    z-index: 999;
    filter: alpha(opacity = 80);
    opacity: 0.8;
    padding: 0px 10px;
}

.menu {
    display: block;
     50px;
    height: 30px;
    float: left;
}

.menu-list {
    position: absolute;
    left: 0px;
    bottom: 35px;
     350px;
    height: 500px;
    border: #CCC 1px solid;
    background-color: white;
    filter: alpha(opacity = 90);
    opacity: 0.9;
    border-radius: 5px;
    display: none;
}

ul {
    margin: 0px;
    padding: 0px;
}

.menu-icon {
    cursor: pointer;
}

.menu-icon ul li {
    display: block;
     15px;
    height: 15px;
    float: left;
    margin: 1px;
    background-color: white;
    border-radius: 3px;
}

.menu-icon:hover li {
    background-color: red;
}

.icons li img {
    max-height: 70px;
    max- 90px;
}

.text {
    position: static;
    height: 20px;
    line-height: 20px;
     100%;
    margin: 0px;
    font-size: 12px;
    font-family: 微软雅黑;
    color: white;
}

.icons-move {
    border: rgb(161, 194, 219) 1px solid;
    background-color: rgb(194, 208, 226);
    filter: alpha(opacity = 60);
    opacity: 0.6;
    border-radius: 3px;
}

.icons-focus {
    border: rgb(161, 194, 219) 1px solid;
    background-color: rgb(194, 208, 226);
    filter: alpha(opacity = 100);
    opacity: 1;
    border-radius: 3px;
}

.window {
    height: 200px;
     200px;
    border: #CCC 1px solid;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    top: 0px;
    z-index: 10;
}

/*
 * 右键菜单
 */
.content-menu {
    position: absolute;
     150px;
    height: auto;
    background-color: rgb(255, 255, 255);
    border: #CCC 1px solid;
    display: none;
	border-radius:5px;
	z-index:999;
}

.content-menu ul {
    margin: 0px;
    padding: 0px;
}

.content-menu ul li {
    list-style: none;
    line-height: 30px;
    height: 30px;
    margin: 3px 0px;
	padding:0px;
    font-size: 13px;
}
.content-menu ul li a{
	text-decoration:none;
	display:block;
	font-family: 微软雅黑;
	padding:0px 5px;
	140px;
	height:100%;
	color: #333;
	outline:none;
	
}
.content-menu ul li a:hover {
    background-color: #DDD;
}

.content-menu ul hr {
    margin: 1px 0px;
    height: 0px;
    border: 0px;
    border-bottom: #CCC 1px solid;
}


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dyllove98/p/3137460.html