26、jQuery

一. jQuery简介

(一) jQuery是什么：

是一个javascript代码仓库
是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

(二) jQuery优势

体积小，使用灵巧(只需引入一个js文件)
方便的选择页面元素(模仿CSS选择器更精确、灵活)
动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
控制响应事件(动态添加响应事件)
提供基本网页特效(提供已封装的网页特效方法)
快速实现通信(ajax)
易扩展、插件丰富

(三) 如何下载JQuery

官方网站：http://jquery.com/

(四) 如何引入JQuery包

引入本地的Jquery
使用Google提供的API导入

写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
	$(function(){
		alert(“jQuery 你好!”);
	});
</script>

(1) 在JQuery库中，$是JQuery的别名，$()等效于就jQuery().
(2) $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

(3) 原生转jQuery: 加$()
jQuery转原生： [] .get()

window.onload == $(function(){})

window.onload = function(){} : ++页面加载、（图片、音频、视频等等）一个页面中只能有一个window.onload++

$(function(){}) : ++文档加载，速度更快一个页面可以有无限个$(function(){})++

二. jQuery选择器的使用

jQuery选择器分为：
基本选择器；
层级选择器；
常用伪类选择器:可以看作是一种特殊的类选择符;

jQuery基本选择器
(1) 包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a) ID选择器：$(“#id”)
b) 标签选择器：$(“element”)
c) 类选择器：$(“.className”)
d) 通配选择器：$(“*”)匹配指定上下文中所有元素
e) 组选择器：$(“selector1,selector2,selectorN”)特点：无数量限制，以逗号分隔（逐个匹配，结果全部返回）

例题:

.css({"属性":"属性值","属性":"属性值"})
或.css("属性","属性值")

<body>
		<div id="main">孔子</div>
		<h4>论语</h4>
		<div class="one">子在川上曰：</div>
		<p>"逝者如斯夫！</p>
		<p>不舍昼夜。"</p>
		<!--a)	找到.one改变他的字体颜色
		b)	找到#main给他增加border：1px solid red
		c)	找到p标签元素给他添加边框border:1px solid green
		d)	找到全部元素改变字体28px
		e)	找到ID与ClassName 添加background:red-->
	
	<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
	<script type="text/javascript">
		$('.one').css('color','red');
		$('#main').css('border',"1px solid red");
		$('p').css('border',"1px solid green");
		$('*').css('fontSize','28px');
		$('#main,.one').css('background','red');
	</script>
	</body>

效果图:

层级选择器：通过DOM的嵌套关系匹配元素

jQuery层级选择器：包含选择器、子选择器、相邻选择器、兄弟选择器 4 种
a) 包含选择器：$(“a b”)在给定的祖先元素下匹配所有后代元素（不受层级限制）
b) 子选择器：$(“parent>child”)在给定的父元素下匹配所有子元素。
c) 相邻选择器：$(“prev + next”)匹配所有紧接在prev元素后的next元素。一个
d) 兄弟选择器：$(“prev ~ siblings”)匹配prev元素之后的所有sibling元素。所有同级元素sibling

案例

<body>
		<div class="main">
			<span>1<img src="img/1.jpg"/></span>
			2<img src="img/1.jpg"/>
		</div>
		3<img src="img/1.jpg">
		4<img src="img/1.jpg">
		<div>
			5<img src="img/1.jpg">
		</div>
//		1..main里所有的img设置border: 5px solid red
//		2..main里的子元素img设置border: 5px solid green
//		3..main的相邻元素img设置border:5px solid blue
//		4. .main的所有兄弟元素img设置border:5px solid yellow
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
//			$('.main img').css('border','5px solid red');
//			$('.main>img').css('border','5px solid green');
//			$('.main+img').css('border','5px solid blue');
			$('.main~img').css('border','5px solid yellow');
		</script>
	</body>

常用伪类选择器：可以看作是一种特殊的类选择符

选择器          说明
:first			匹配找到的第1个元素
:last			匹配找到的最后一个元素
:eq			    匹配一个给定索引值的元素
:even			匹配所有索引值(下标)为偶数的元素
:odd			匹配所有索引值(下标)为奇数的元素
:gt(index)	    匹配所有大于给定索引值的元素
:lt(index)	    匹配所有小于给定索引值的元素
:not			去除所有与给定选择器匹配的元素

案例:

<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			/*
			 * :first				匹配找到的第1个元素
				:last				匹配找到的最后一个元素
				:eq				匹配一个给定索引值的元素
				:even				匹配所有索引值为偶数的元素
				:odd				匹配所有索引值为奇数的元素
				:gt(index)		匹配所有大于给定索引值的元素
				:lt(index)		匹配所有小于给定索引值的元素
				:not				去除所有与给定选择器匹配的元素

			 */
//			$('ul li:first').css('background',"red");
//			$('ul li:last').css('background',"red");
//			$('ul li:eq(3)').css('background',"red");
//			$('ul li:even').css('background',"red");
//			$('ul li:odd').css('background',"green");
//			$('ul li:gt(3)').css('background',"red");
//			$('ul li:lt(3)').css('background',"red");
			$('ul li:not(:eq(6))').css('background',"red");
		</script>
	</body>

三. jQuery属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box" title="pox" width="100px" height="100px" border='1px solid black' >
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			var $div = $('#box');
			
//			$div.attr('id','boxid');
//			alert($div.attr('class'));
//设置属性和值,只有属性时返回属性值


//addClass(class|fn)
//为每个匹配的元素添加指定的类名。

//removeClass([class|fn])
//从所有匹配的元素中删除全部或者指定的类。





			$div.click(function(){
//				$div.toggleClass('ddddd');
// 如果存在就删除一个类, 如果不存在就添加一个类。


//html() ===  innerHTML,取得第一个匹配元素的html内容。传参设置,不传是获取.
//				$(this).html('<strong>中国</strong>');
//				alert($(this).html())


//text() === innerText ,取得所有匹配元素的内容(不包括解析的标签),传参写入,不传参获取
				$(this).text('<strong>中国</strong>');
				alert($(this).text());
			})
		</script>
	</body>
</html>

四. jQuery动画

(一) 显隐动画

show():显示
hide():隐藏
原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0；
show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见。
参数：
show()
show(speed,callback)
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++callback++:动画完成时执行的方法

(二) 显隐切换

toggle():切换元素的可见状态
原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
参数：
toggle(speed)
toggle(speed,callback)
toggle(boolean)
++speed++:字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
++easing++:使用哪个缓冲函数来过渡的字符串（linear/swing）
++callback++:动画完成时执行的方法
++boolean++:true为显示 false为隐藏

(三) 滑动

1. 显隐滑动效果

slideDown():滑动隐藏
slideUp():滑动显示
参数：
slideDown(speed,callback)
slideUp(speed,callback)

2. 显隐切换滑动

slideToggle():显隐滑动切换
参数：
slideToggle(speed,callback)

(四) 渐变：通过改变不透明度

1. 淡入淡出

fadeIn()
fadeOut()
参数：
fadeIn(speed,callback)
fadeOut(speed,callback)

2. 设置淡出透明效果

fadeTo():以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)

3. 渐变切换：结合fadeIn和fadeOut

fadeToggle()
参数：
fadeOut(speed,callback)

(五) 自定义动画：animate()

用animate模拟show():
show:表示由透明到不透明
toggle:切换
hide:表示由显示到隐藏

.animate({属性:属性值,属性:属性值},运动时间,fn)

例题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="效果" />
		<div id="box">
			
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			$('#btn').click(function(){
//				$('#box').hide(5000,function(){
////					$(this).show(5000)
//		
//				});
//				$('#box').toggle(5000);
//				$('#box').slideUp(5000,function(){
//					alert('hehe')
//					$(this).slideDown(5000);
//				})
//				$('#box').slideToggle(4000);
//				$('#box').fadeOut(5000,function(){
//					$(this).fadeIn(5000,function(){
//						$(this).fadeTo(3000,0.3);
//					})
//				})
//				$('#box').fadeToggle(3000)
				$('#box').animate({left:800},30,function(){
					$(this).animate({top:600},30,function(){
						$(this).animate({left : 0},30,function(){
							$(this).animate({top : 100},30)
						})
					})
				})
			})
		</script>
	</body>
</html>

jQuery进阶

一、遍历

each(callback)

$('ul li').each(function(){}) 对象方法
$.each(obj,function(index,value){}) 工具方法

//each(function(){})    对象方法
//$.each(obj,function(){}) 工具方法
//			$('ul li').click(function(){
//				$(this).css('background','red');
//			})
			let $lis = $('ul li');
//			$lis.each(function(index,value){
////				$(value).click(function(){
////					alert($(this).text());
////				})
//				$(value).hover(function(){
//					$(this).css('background','red');
//				},function(){
//					$(this).css('background',"");
//				})
//			})

			$.each($lis,function(index,value){
				$(value).mouseenter(function(){
					$(this).css('background','red');
				})
				$(value).mouseleave(function(){
					$(this).css('background','');
				})
			})

二、Ajax

(一) .load()方法

1. .load三个参数

（1）参数一：url必选(url,参数类型字符串)
（2）参数二：data可选，发送key:value数据，参数类型为object
（3）参数三：callback可选，回调函数，参数类型为函数Function（function可传（response,status,xhr））
response获取所返回的结果，可对其进行数据的操作
status当前我们获取数据的状态success成功error失败
xhr:把前面两个参数的功能全部实现，他本身就是一个对象，前两个对象相当于他的属性
（4）

案例一：本地.html文件
案例二：服务器文件.php文件（获取方式get和post）

(二)

.get():以get方式发送数据、处理静态页
.post():以post方式发送数据
.getScript():专业处理js文件
.getJSON():专业处理JSON文件

//.get()
            $('#btn').click(function(){
//				$.get('php/index.php?name=小罗&age=30&t=' + new Date().getTime(),function(data){
//					$('#box').text(data);
//				})
//				$.get('php/index.php?t=' + new Date().getTime(),"name=小罗&age=30",function(data){
//					$('#box').text(data);
//				})
				$.get('php/index.php?t=' + new Date().getTime(),{name:"小罗",age:30},function(data){
					$('#box').text(data);
				})
			})
			
//.post()
            $('#btn').click(function(){
//				$.post('php/index.php',"name=小王&age=17",function(data){
//					$('#box').text(data);
//				})
				$.post('php/index.php',{name:"小王",age:17},function(data){
					$('#box').text(data);
				})
			})

//.getScript()			
			$('#btn').click(function(){
				$.getScript('js/index.js',function(){});
			})

//.getJSON()			
            $("#btn").click(function(){
				$.getJSON("index.json",function(data){
					var str = '';
					$(data).each(function(index,value){
						str = `用户名:<strong>${value.name}</strong><em>${value.age}</em><br>`;
						$('#box').append(str);
					})
					
				})
			})

1. 三个参数

(1) 参数一：url:必选（url参数类型字符串）
(2) 参数二：data：可选，发送key:value数据，参数类型为object(带?,字符串,对象)
(3) 参数三：callback：可选，回调函数，参数类型为函数Function
(4) type可选，字符串，主要设置返回文件的类型($.getScript和.getJSON无此参数)

2. $.get和$.post方式之间的区别：

(1) $.get是以$_GET方式接受数据$.post是以$_POST方式接受数据
(2) $.get可以带?方式来传参，$.post不能以?方式传参

(三) $.ajax():(底层方法讲解)

url:外部文件地址
type:提交文件方式，GET和POST
data:传参方式（字符串，对象）
success:回调函数 Function(response,status,xhr){}
dateType:返回数据类型

            $.ajax({
				type:"get",
				url:"index.php?name=张三&age=18",
				async:true,
				success : function(data){
					alert(data);
				}
			});

三、DOM操作

(一) 创建元素节点

1. $(html):创建节点

如：$(“<div title = ‘盒子’>dom</div>”);

(二) 创建文本

var $div = $(“<div>我是DOM</div>”)
$(“body”).append($div);

(三) 设置属性

var $div = $("<div title=‘div盒子’>我是DOM</div>")
$("body").append($div);

(四) DOM插入

1. 内部插入：(子集)

(1) append():向元素内部增加内容（末尾）
(2) appendTo():将要增加的内容增加到元素中
(3) prepend():向元素内部增加内容（前置）
(4) prependTo():将要增加的内容增加到元素中

2. 外部插入：（同级）

(1) after():在元素后面插入内容
(2) insertAfter():将内容插入元素后面
(3) before():在元素前面插入内容
(4) insertBefore():将内容插入元素前面

(五) 删除

1. remove():删除匹配元素

2. empty():清空子节点内容

            $('#btn').click(function(){
				$('h3').remove();
			})
			$("#btn1").click(function(){
				$('h4').empty();
			})

(六) 克隆：创建指定节点的副本

1. clone()

            $('h3').click(function(){
				//true: 包含事件
				$(this).clone(true).appendTo($('body'));
			})

true:表示复制属性、样式和事件

(七) 替换：

1. replaceWith():将指定元素替换成匹配元素

2. replaceAll():用匹配元素替换成指定元素

            var $a = $('a');
			$a.each(function(){
				$(this).click(function(){
//					$(this).replaceWith("<input type='button' value='" + $(this).text() + "'>" );
					$("<input type='button' value='" + $(this).text() + "'>").replaceAll($(this));
				})
			})
			
			
			
			
			//注：
			$(document).onclick(function(evt){
				
				//阻止默认行为
				evt.preventDefault();
				//阻止事件冒泡
				evt.stopPropagation();
				//既阻止默认行为也阻止事件冒泡
				return false;
			})

四、图片翻转

<doctype html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery实现图片翻牌旋转特效</title>
		<style>
			*{margin:0px;padding:0px;}
			li{list-style:none;}
			#brand{
				330px;
				height:400px;
				border:1px solid #dddddd;
				box-shadow:0px 0px 5px #dddddd;
				margin:30px auto;
			}
			#brand .title{
				100%;
				height:35px;
				line-height:35px;
				font-size:16px;
				margin-top:4px;
				border-bottom:2px solid #33261c;
				text-align:center;
				color:#33261c;
			}
			#brand .bd-box{
				284px;
				height:358px;
				overflow:hidden;
				padding:0px 24px;
			}
			#brand .bd-box li{
				float:left;
				122px;
				height:77px;
				overflow:hidden;
				position:relative;
				margin:10px 10px 0px 10px;
			}
			#brand .bd-box li img{
				120px;
				height:75px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:0px;
				z-index:2;
				overflow:hidden;
			}
			#brand .bd-box li span{
				120px;
				height:0px;
				border:1px solid #e9e8e8;
				position:absolute;
				left:0px;
				top:38px;
				z-index:1;
				text-align:center;
				line-height:75px;
				font-size:14px;
				color:#FFF;
				background:#ffa340;
				font-weight:bold;
				overflow:hidden;
				display:none;
			}
			#brand .bd-box li a{
				120px;
				height:75px;
				position:absolute;
				left:0px;
				top:0px;
				z-index:3;
			}
		</style>
		<script type="text/javascript" src="jquery-1.8.3.js"></script>
		<script type="text/javascript">
			$(function(){
				const $lis = $('#brand .bd-box li');
				$lis.each(function(){
					$(this).hover(function(){
						var $img = $(this).find('img');
						var $span = $(this).children('span');
						$span.stop();
						$img.animate({height : 0,top : 37},500,function(){
							$img.hide();
							$span.show().animate({height : 75,top : 0},500)
						})
					},function(){
						var $img = $(this).find('img');
						var $span = $(this).children('span');
						$img.stop();
						$span.animate({height : 0,top : 37},500,function(){
							$span.hide();
							$img.show().animate({height : 75,top : 0},500)
						})
					})
				})
			})
		</script>
	</head>
	<body>
		<div id="brand">
			<div class='title'>
				热门品牌推荐
			</div>
			<ul class='bd-box'>
				<li>
					<a href="#"> </a>
					<img src="images/1.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/2.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/3.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/4.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/5.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/6.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/7.jpg" />
					<span>肌龄</span>
				</li>
				<li>
					<a href="#"> </a>
					<img src="images/8.jpg" />
					<span>肌龄</span>
				</li>
			</ul>
		</div>
		
	</body>
</html>

五、瀑布流

<!DOCTYPE html>
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			body {
				height: 100%;
			}
			div.wrap {
				 100%;
				margin: 0 auto;
				background: #DDD;
			}
			div.wrap div {
				position: absolute;
				 220px;
				padding: 4px;
				border: 1px solid #000;
			}
			div.wrap div img {
				 220px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			window.onload = function(){
				pbl("wrap");
			}
			$(window).resize(function(){
				pbl("wrap");
			})
		function pbl(ele,child,space){
			//初始化参数
			if(!ele){
				return;
			}
			child = child || 'div';
			space = space || 10;
			//获取大盒子
			var $bigBox = $("#" + ele);
			//获取所有的子盒子
			var $childs = $bigBox.children(child);
			//大盒子的宽度
			var bigBoxWidth = $bigBox.width();
			//一个子盒子的宽
			var childWidth = $childs.eq(0).width();
			//计算列数
			var colNum = Math.floor(bigBoxWidth / childWidth);
	
			//计算左右间隙
			var padding = Math.floor((bigBoxWidth - childWidth * colNum) / (colNum + 1));
			//初始化第一行的坐标
			var arr = [];
			for(var i = 0;i < colNum;i ++){
				arr[i] = {};
				arr[i].left = (i * childWidth) + (i + 1) * padding;
				arr[i].top = space;
			}
			
			//遍历所有的子节点，放到最小高度的列中
			$childs.each(function(index,value){
				$(value).css('position','absolute');
				var i = minTop(arr);
//				alert(i);
				$(value).animate({left : arr[i].left,top : arr[i].top},3000,function(){
					
				})
				arr[i].top += $(value).outerHeight();
					$bigBox.css('height',arr[i].top);
			})
		}
		function minTop(arr){
			var min = arr[0].top;
			var index = 0;
			for(var i = 0,len = arr.length;i < len;i ++){
				if(min > arr[i].top){
					min = arr[i].top;
					index = i;
				}
			}
			return index;
		}
		</script>
	</head>

	<body>
		<div class="wrap" id="wrap">
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/1.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/2.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/3.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/4.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/5.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/6.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/7.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/8.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/9.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/10.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/11.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/12.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/13.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/14.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/15.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/16.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/17.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/18.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/19.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/20.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/21.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/22.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/23.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/24.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/25.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/26.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/27.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/28.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/29.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/30.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/31.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/32.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/33.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/34.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/35.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/36.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/37.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/38.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/39.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/40.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/41.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/42.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/43.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/44.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/45.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/46.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/47.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/48.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/49.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/50.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/51.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
		</div>
	</body>

</html>

相关阅读:
Balanced Binary Tree
Swap Nodes in Pairs
Reverse Nodes in k-Group
Reverse Linked List II
Remove Nth Node From End of List
Remove Duplicates from Sorted List II
Remove Duplicates from Sorted List
Partition List
Merge Two Sorted Lists
【Yii2.0】1.2 Apache检查配置文件语法
原文地址：https://www.cnblogs.com/zhongchao666/p/9275624.html