一、jQuery插件

1.1、说明

​ jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

​ 注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

​ jQuery 插件常用的网站：

  • jQuery 插件库 http://www.jq22.com/

  • jQuery 之家 http://www.htmleaf.com/

    jQuery 插件使用步骤：

    1、引入相关文件。（jQuery 文件 和 插件文件）

    2、复制相关html、css、js (调用插件)。

1.2、瀑布流插件

1.2.1、说明

​ 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。

​ 插件的使用三点：

  1. 引入css.

  2. 引入JS

  3. 引入html。

    （有的简单插件只需引入html和js，甚至有的只需引入js）

0011

1.2.2、开发步骤

0012

1.2.2.1、引入css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<head>
    <style>
        #gallery-wrapper {
            position: relative;
            max-width: 75%;
            width: 75%;
            margin: 50px auto;
        }
        
        img.thumb {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
        
        .white-panel {
            position: absolute;
            background: white;
            border-radius: 5px;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
            padding: 10px;
        }
        
        .white-panel h1 {
            font-size: 1em;
        }
        
        .white-panel h1 a {
            color: #A92733;
        }
        
        .white-panel:hover {
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
            margin-top: -5px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
    </style>
</head>

1.2.2.2、引入js

1
2
3
4
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/pinterest_grid.js"></script>
</head>

1.2.2.3、编写html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<body>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="img/1.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="img/2.jpg" class="thumb">
            <h1><a href="#">Title 2</a></h1>
            <p>Description 2</p>
        </article>
        <article class="white-panel">
            <img src="img/3.jpg" class="thumb">
            <h1><a href="#">Title 3</a></h1>
            <p>Description 3</p>
        </article>
        <article class="white-panel">
            <img src="img/4.jpg" class="thumb">
            <h1><a href="#">Title 4</a></h1>
            <p>Description 4</p>
        </article>
        <article class="white-panel">
            <img src="img/5.jpg" class="thumb">
            <h1><a href="#">Title 5</a></h1>
            <p>Description 5</p>
        </article>
        <article class="white-panel">
            <img src="img/6.jpg" class="thumb">
            <h1><a href="#">Title 6</a></h1>
            <p>Description 6</p>
        </article>
        <article class="white-panel">
            <img src="img/7.jpg" class="thumb">
            <h1><a href="#">Title 7</a></h1>
            <p>Description 7</p>
        </article>
        <article class="white-panel">
            <img src="img/8.jpg" class="thumb">
            <h1><a href="#">Title 8</a></h1>
            <p>Description 8</p>
        </article>
        <article class="white-panel">
            <img src="img/9.jpg" class="thumb">
            <h1><a href="#">Title 9</a></h1>
            <p>Description 9</p>
        </article>
        <article class="white-panel">
            <img src="img/10.jpg" class="thumb">
            <h1><a href="#">Title 10</a></h1>
            <p>Description 10</p>
        </article>
        <article class="white-panel">
            <img src="img/11.jpg" class="thumb">
            <h1><a href="#">Title 11</a></h1>
            <p>Description 11</p>
        </article>
        <article class="white-panel">
            <img src="img/12.jpg" class="thumb">
            <h1><a href="#">Title 12</a></h1>
            <p>Description 12</p>
        </article>
        <article class="white-panel">
            <img src="img/13.jpg" class="thumb">
            <h1><a href="#">Title 13</a></h1>
            <p>Description 13</p>
        </article>
        <article class="white-panel">
            <img src="img/14.jpg" class="thumb">
            <h1><a href="#">Title 14</a></h1>
            <p>Description 14</p>
        </article>
        <article class="white-panel">
            <img src="img/15.jpg" class="thumb">
            <h1><a href="#">Title 15</a></h1>
            <p>Description 15</p>
        </article>
    </section>
</body>

1.2.3、完整的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<head>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/pinterest_grid.js"></script>
    <style>
        #gallery-wrapper {
            position: relative;
            max-width: 75%;
            width: 75%;
            margin: 50px auto;
        }
        
        img.thumb {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
        
        .white-panel {
            position: absolute;
            background: white;
            border-radius: 5px;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
            padding: 10px;
        }
        
        .white-panel h1 {
            font-size: 1em;
        }
        
        .white-panel h1 a {
            color: #A92733;
        }
        
        .white-panel:hover {
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
            margin-top: -5px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
    </style>
</head>
<body>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="img/1.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="img/2.jpg" class="thumb">
            <h1><a href="#">Title 2</a></h1>
            <p>Description 2</p>
        </article>
        <article class="white-panel">
            <img src="img/3.jpg" class="thumb">
            <h1><a href="#">Title 3</a></h1>
            <p>Description 3</p>
        </article>
        <article class="white-panel">
            <img src="img/4.jpg" class="thumb">
            <h1><a href="#">Title 4</a></h1>
            <p>Description 4</p>
        </article>
        <article class="white-panel">
            <img src="img/5.jpg" class="thumb">
            <h1><a href="#">Title 5</a></h1>
            <p>Description 5</p>
        </article>
        <article class="white-panel">
            <img src="img/6.jpg" class="thumb">
            <h1><a href="#">Title 6</a></h1>
            <p>Description 6</p>
        </article>
        <article class="white-panel">
            <img src="img/7.jpg" class="thumb">
            <h1><a href="#">Title 7</a></h1>
            <p>Description 7</p>
        </article>
        <article class="white-panel">
            <img src="img/8.jpg" class="thumb">
            <h1><a href="#">Title 8</a></h1>
            <p>Description 8</p>
        </article>
        <article class="white-panel">
            <img src="img/9.jpg" class="thumb">
            <h1><a href="#">Title 9</a></h1>
            <p>Description 9</p>
        </article>
        <article class="white-panel">
            <img src="img/10.jpg" class="thumb">
            <h1><a href="#">Title 10</a></h1>
            <p>Description 10</p>
        </article>
        <article class="white-panel">
            <img src="img/11.jpg" class="thumb">
            <h1><a href="#">Title 11</a></h1>
            <p>Description 11</p>
        </article>
        <article class="white-panel">
            <img src="img/12.jpg" class="thumb">
            <h1><a href="#">Title 12</a></h1>
            <p>Description 12</p>
        </article>
        <article class="white-panel">
            <img src="img/13.jpg" class="thumb">
            <h1><a href="#">Title 13</a></h1>
            <p>Description 13</p>
        </article>
        <article class="white-panel">
            <img src="img/14.jpg" class="thumb">
            <h1><a href="#">Title 14</a></h1>
            <p>Description 14</p>
        </article>
        <article class="white-panel">
            <img src="img/15.jpg" class="thumb">
            <h1><a href="#">Title 15</a></h1>
            <p>Description 15</p>
        </article>
    </section>
</body>

1.2.4、效果图

0013

1.3、图片懒加载

1.3.1、说明

​ 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。

​ 懒加载只需引入html 和 js操作 即可，此插件不涉及css。

1.3.2、开发步骤

1.3.2.1、编写html

1
2
3
4
5
6
7
8
<body>
    <img data-lazy-src="./img/1.jpg">
    <img data-lazy-src="./img/2.jpg">
    <img data-lazy-src="./img/3.jpg">
    <img data-lazy-src="./img/4.jpg">
    <img data-lazy-src="./img/5.jpg">
    <img data-lazy-src="./img/6.jpg">
</body>

1.3.2.2、引入js

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

1.3.3、完整的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <img data-lazy-src="./img/1.jpg">
    <img data-lazy-src="./img/2.jpg">
    <img data-lazy-src="./img/3.jpg">
    <img data-lazy-src="./img/4.jpg">
    <img data-lazy-src="./img/5.jpg">
    <img data-lazy-src="./img/6.jpg">
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>