原生JavaScript实现的一个简单的图片各种排序功能

效果：

HTML结构：

<div id="box">
		<input type="button" value="从大到小" />
		<input type="button" value="打乱顺序" />
		<ul>
			<li>
				<img src="img/1.jpg" alt="">
				<p>1 - 言叶之庭01</p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<p></p>
			</li>
		</ul>
	</div>

css样式：

<style>
		ul,
		li,
		p {
			padding: 0;
			margin: 0;
		}
		
		ul,
		li {
			list-style: none;
		}
		
		#box {
			width: 1000px;
			height: 600px;
			border: 1px solid #000;
			margin: 50px auto;
			text-align: center;
			position: relative;
		}
		
		input {
			margin-top: 30px;
			width: 100px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #ccc;
			background: #009999;
			color: #fff;
			outline: none;
		}
		
		ul {
			width: 1000px;
			height: 500px;
			top: 100px;
			position: absolute;
			background: #fff;
		}
		
		ul li {
			width: 240px;
			height: 250px;
			float: left;
			padding: 0 5px 10px 5px;
		}
		
		ul li img {
			width: 240px;
			height: 200px;
			vertical-align: top;
		}
		
		p {
			background: #ccc;
			height: 30px;
			line-height: 30px;
			color: #006598;
			font-weight: bold;
		}
	</style>

JavaScript：

                        var aLi = document.getElementsByTagName('li');
			var aInp = document.getElementsByTagName('input');
			var json = {
				'Url' : ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg'],
				'title' : ['1 - 言叶之庭01','2 - 言叶之庭02','3 - 言叶之庭03','4 - 言叶之庭04','5 - 言叶之庭05','6 - 言叶之庭06','7 - 言叶之庭07','8 - 言叶之庭08']
			};
			var num = [0,1,2,3,4,5,6,7];
			var oImg = document.getElementsByTagName("img");
			var oP = document.getElementsByTagName("p");
			//初始化
			tab();
			
			//函数封装
			function tab(){
				for (var i = 0 ; i<aLi.length ; i++) {
					oImg[i].src = json.Url[num[i]];
					oP[i].innerHTML = json.title[num[i]]
				}
			}
			//大小切换
			aInp[0].onoff = true;  //定义一个属性值
			aInp[0].onclick = function(){
				if(this.onoff){
					num.sort(function(a,b){
						return  b-a;
					})
					tab();
					this.value = "从小到大";
					aInp[0].onoff = false;
				}else{
					num.sort(function(a,b){
						return  a-b;
					})
					tab();
					this.value = "从大到小";
					aInp[0].onoff = true;
				}
				
			}
			
			//乱序
			aInp[1].onclick = function(){
				num.sort(function(a,b){
					return Math.random()-0.5;
				})
				tab();
			}

扫描二维码关注公众号，回复： 11281710 查看本文章