JS图片随机排序

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS图片随机排序</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
var arr = [];
var tarr = [];
var pic = [];
pic[0] = "//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg";
pic[1] = "//ku.shouce.ren/files/images/201601/56a34a01a2e91.jpg";
pic[2] = "//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg";
pic[3] = "//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg";
pic[4] = "//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg";
pic[5] = "//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg";
pic[6] = "//ku.shouce.ren/files/images/201601/56a34a1422687.jpg";
pic[7] = "//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg";
pic[8] = "//ku.shouce.ren/files/images/201601/56a34a1559ecd.jpg";
var index = 9;
function rond(){
	for(var i=0; i<index; i++){
		arr[i] = i;
	}
	var j = index;
	for(var i=0; i<index; i++){
		var t = Math.floor(Math.random()*j);
		j--;
		tarr[i] = arr.splice(t,1);
	}
}
function resetPic(){
	rond();
	for(var i=0; i<index; i++){
		$("#c_u").append("<li class=\"li_"+tarr[i]+"\" style=\"background:url("+pic[i]+")\"> </li>")
	}
}
$("#reset span").click(function(){
	rond();
	for(var i=0; i<index; i++){
		$("#c_u li").eq(i).attr("class","").addClass("li_"+tarr[i]);
	}
});
resetPic();
});
</script>
<style type="text/css">
body{background:#CCCCCC; padding:0; margin:0;}
#reset{width:898px; height:36px; margin:0 auto; position:relative; color:#FFFFFF; font-size:28px; line-height:36px; font-weight:bold;}
#reset span{cursor:pointer; text-decoration:underline;}
#c_u{width:898px; height:596px; margin:0 auto; position:relative; list-style:none; padding:8px; border:4px solid #FFFFFF;}
#c_u li{margin:8px; border:4.5px solid #FFFFFF; width:125px; height:125px; position:absolute; padding:0; transition:all .5s ease-out 0s; -webkit-transition:all .5s ease-out 0s; -o-transition:all .5s ease-out 0s;}
#c_u li{cursor:move;}
#c_u li.red{border-color:#FF99CC;}
#c_u li.move{position:fixed;}
#c_u li.abs{position:absolute;}
#c_u li img{vertical-align:top;}
#c_u .li_0{top:8px; left:8px;}
#c_u .li_1{top:8px; left:158px;}
#c_u .li_2{top:8px; left:308px;}
#c_u .li_3{top:8px; left:458px;}
#c_u .li_4{top:8px; left:608px;}
#c_u .li_5{top:8px; left:758px;}
#c_u .li_6{top:158px; left:8px;}
#c_u .li_7{top:158px; left:158px;}
#c_u .li_8{top:158px; left:308px;}
#c_u .li_9{top:158px; left:458px;}
#c_u .li_10{top:158px; left:608px;}
#c_u .li_11{top:158px; left:758px;}
#c_u .li_12{top:308px; left:8px;}
#c_u .li_13{top:308px; left:158px;}
#c_u .li_14{top:308px; left:308px;}
#c_u .li_15{top:308px; left:458px;}
#c_u .li_16{top:308px; left:608px;}
#c_u .li_17{top:308px; left:758px;}
#c_u .li_18{top:458px; left:8px;}
#c_u .li_19{top:458px; left:158px;}
#c_u .li_20{top:458px; left:308px;}
#c_u .li_21{top:458px; left:458px;}
#c_u .li_22{top:458px; left:608px;}
#c_u .li_23{top:458px; left:758px;}
</style>
</head>
<body>
<div id="reset"><span>排序</span>:</div>
<ul id="c_u"></ul>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS图片随机排序

分类

jQuery实例

描述

jquery CSS实现图片随机排序，这里要注意，在定义图片个数，li的个数也要与图片个数一样，不过这里的变量已经修改成等同于图片个数。实际上是打乱了图片数组，让图片位置随机。运行代码后，鼠标点击“排序”后，图片自动随机变换位...