Js imitating the windows desktop icon Arrangement Algorithm (with image) _ javascript skills

Refer to jquery. if you want to introduce all functions of Jquery, refer to jquery-uiand jquery-ui.css. The specific implementation steps are as follows. If you are interested, refer to the following. Note: Jquery needs to be introduced.
If the upload function is full, import jquery-uiand jquery-ui.css.
:

Js Code:

The Code is as follows:

$ (Function (){

// Menu list
Var menu_list = $ (". menu-list ");

// Work zone
Var working = $ (". working ");

Working. click (function (){
Menu_list.hide ();
$ (". Content-menu"). hide ("slow ");
});

// Click the menu icon
$ (". Menu"). bind ("click", function (){
Menu_list.show ();

});
Arrange ();

$ (Window). resize (function (){
Arrange ();
});

// Shield the right-click menu
$ (Document). contextmenu (function (){
Return false;
});

// Right-click the workspace to display the menu
$ (". Working"). contextmenu (function (event ){

Var x = event. clientX;
Var y = event. clientY;
Var menu = $ (". content-menu ");

// Determine coordinates
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 ("visible height:" + height + ", mouse 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 "refresh ":
Document. location. reload ();
Break;
Case "log out ":
If (confirm ("do you want to log out? ")){

}
Break;
Default:
Break;
}

$ (". Content-menu"). hide ();
});
});
// Arrange the icon Section
Function arrange (){
Var ul = $ (". icons ");
Var working = $ (". working ");
// Coordinates
Var position = {x: 0, y: 0, bottom: 110, width: 50, height: 50, parent: {height: 0, width: 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. The height-position.bottom ){
Position. y = 0;
Position. x = position. x + position. width + position. padding. left;
}
});
}

Html code:

The Code is as follows:

Index.html