目录
1. 瀑布流插件： jQuery 之家 http://www.htmleaf.com/
2. 图片懒加载： jQuery 插件库 http://www.jq22.com/
一、 jQuery插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
jQuery 插件演示：
- 瀑布流
- 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面 - 全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
1. 瀑布流插件： jQuery 之家 http://www.htmleaf.com/
素材自取：jQueryStudy: jQuery学习仓库 - Gitee.com
查看演示后 直接下载即可！！
下载成功后可以通过index.html来查看样式~ 这里通过查看网页源代码
可以看到，要实现当前效果就要引入别人写好的css、dist、js文件
使用方法：
1. css的引入：
2. JavaScript的引入：
3. html的复制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">
<link rel="stylesheet" href="./dist/sortable.min.css">
<script type="text/javascript" src="./dist/sortable.min.js"></script>
</head>
<body>
<main class="sortable">
<div class="container">
<div class="wrapper">
<ul class="sortable__nav nav">
<li>
<a data-sjslink="all" class="nav__link">
All
</a>
</li>
<li>
<a data-sjslink="flatty" class="nav__link">
Flatty
</a>
</li>
<li>
<a data-sjslink="funny" class="nav__link">
Funny
</a>
</li>
</ul>
<div id="sortable" class="sjs-default">
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-1.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 1</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapiente
est quae iure...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-2.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 2</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, dolorem
similique vero explicabo...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-3.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 3</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat voluptate, fuga tenetur eos
ducimus animi porro...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-4.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 4</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque quisquam, obcaecati unde
nam
est quos...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-5.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 5</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic minima nisi
reprehenderit...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-6.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 6</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id, deserunt inventore...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-7.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 7</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero culpa, fuga, magni
sunt
dolores nam...
</p>
</div>
</div>
</div>
<div data-sjsel="flatty">
<div class="card">
<img class="card__picture" src="./images/item-8.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 8</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam, blanditiis
necessitatibus...
</p>
</div>
</div>
</div>
<div data-sjsel="funny">
<div class="card">
<img class="card__picture" src="./images/item-9.jpg" alt="">
<div class="card-infos">
<h2 class="card__title">Example 9</h2>
<p class="card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci voluptatum laborum
officiis...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript">
document.querySelector('#sortable').sortablejs()
</script>
</body>
</html>
那么最后不论是标题还是图片都可以自己直接进行切换即可~~~
2. 图片懒加载： jQuery 插件库 http://www.jq22.com/
将压缩版放入文件的js中：
下一步同样是进入index.html 的网页源代码进行复制，但是这里要根据插件规则进行修改：
通过ctrl + h 直接进行将全部图片进行替换！
这个插件的引入， 必须要写道所有的图片的下面
现在就可以实现懒加载效果了！！！
3. 全屏滚动
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
使用方法
这里就不过多赘述了~
这里有各种选项的配置可以使用：
