首页 > 代码库 > 利用jQuery来扩展一个瀑布流插件

利用jQuery来扩展一个瀑布流插件

 

 

 

 

简单了解jQuery.fn.extend()

jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)

技术分享(截图来自jQuery文档)

为了更清晰的理解我将需求写成了注释

扩展代码如下

 1 (function($){
 2 
 3     $.fn.WaterFall = function () {
 4 
 5         /*
 6          * 瀑布流插件
 7          * 容器的宽度固定
 8          * 子容器的宽度也固定
 9          * 显示多少列固定
10          * */
11 
12         /*初始化的元素 设定的是大容器*/
13         var $parentBox = $(this);/*这里this指向的是设置瀑布流的容器*/
14         var parentWidth = $parentBox.width();/*大容器的宽度*/
15         var $itemsBox = $parentBox.children();/*所有的子容器*/
16         var itemWidth = $itemsBox.width();/*子容器的宽度*/
17         var col = 5 ;/*列数*/
18         var space = (parentWidth - col*itemWidth)/(col-1);/*间距*/
19 
20         /*布局 定位*/
21 
22         /*记录每一列的高度*/
23 
24         var arrHeight = [];
25         $itemsBox.each(function (index, item) {
26             /*每一个子容器*/
27             var $item = $(item);
28             //console.log(index,item);
29             /*前五个*/
30             if(index < col){
31                 /*记录arrHeight*/
32                 arrHeight[index] = $item.height();
33                 $item.css({top:‘0‘,left:(itemWidth+space)*index});
34             }else{
35                 /*其他的子容器*/
36                 /*找到最矮的一列*/
37                 /*当前这列的高度 和 索引*/
38                 var minHeight = arrHeight[0];
39                 var minIndex = 0;
40                 for(var i=0;i<arrHeight.length;i++){
41                     if(minHeight > arrHeight[i]){
42                         minHeight = arrHeight[i];
43                         minIndex = i;
44                     }
45                 }
46                 /*定位*/
47                 $item.css({top:minHeight+space,left:minIndex*(itemWidth+space)});
48                 arrHeight[minIndex] = minHeight + space + $item.height();
49             }
50         });
51         /*赋值高度*/
52         var maxHeight = arrHeight[0];
53         for(var i = 0 ; i < arrHeight.length ; i++){
54             if(maxHeight < arrHeight[i]){
55                 maxHeight = arrHeight[i];
56             }
57         }
58      $parentBox.height(maxHeight);
59     }
60 
61 })(jQuery);

调用方法的时候记得引入jQuery和扩展好的插件

调用代码如下

 

 1 <!--引入jQuery-->
 2 <script src="js/jquery.min.js"></script>
 3 <!--引入刚刚扩展的瀑布流插件-->
 4 <script src="js/jquery.waterfall.js"></script>
 5 <!--调用方法-->
 6 <script>
 7     window.onload  = function () {
 8         $(要选择的容器).WaterFall();/*js代码里面的this指向的就是这个容器*/
 9     }
10 </script>

需要注意的是必须要在文档加载完成之后调用,否则会造成图片重叠。

 

样式和布局的代码如下,有兴趣的可以看一下(静态的页面,想看用ajax动态添加的可以给我发消息 - -,)

技术分享
  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         body{
  8             margin: 0;
  9             padding: 0;
 10             font-family: "Microsoft Yahei";
 11             background: #f5f5f5;
 12         }
 13         .container{
 14             width: 1200px;
 15             margin: 0 auto;
 16             padding-top: 40px;
 17         }
 18         .container > .items {
 19             position: relative;
 20         }
 21         .container > .items > .item {
 22             width: 232px;
 23             position: absolute;
 24             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 25         }
 26         /*目的是固定高度且不一样*/
 27         .container > .items > .item > img {
 28             width: 100%;
 29             display: block;
 30             height: 250px/*目的是固定高度且不一样*/
 31         }
 32         .container > .items > .item > p {
 33             margin: 0;
 34             padding: 10px;
 35             background: #fff;
 36         }
 37         .container > .btn {
 38             width: 280px;
 39             height: 40px;
 40             margin: 30px auto;
 41             text-align: center;
 42             line-height: 40px;
 43             background-color: #CCC;
 44             border-radius: 6px;
 45             font-size: 24px;
 46             cursor: pointer;
 47         }
 48         .container > .loading {
 49             background-color: transparent;
 50         }
 51 
 52     </style>
 53 </head>
 54 <body>
 55 <div class="container">
 56     <div class="items">
 57         <div class="item">
 58             <img src="images/1.jpg" alt="">
 59             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
 60         </div>
 61         <div class="item">
 62             <img src="images/2.jpg" alt="">
 63             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
 64         </div>
 65         <div class="item">
 66             <img src="images/3.jpg" alt="">
 67             <p>花非花,雾非雾,夜半来,天明去,来如春梦来如春梦不多时,去似朝云无觅处。</p>
 68         </div>
 69         <div class="item">
 70             <img src="images/4.jpg" alt="">
 71             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,去,来如春梦不多时,去似朝云无觅处。</p>
 72         </div>
 73         <div class="item">
 74             <img src="images/5.jpg" alt="">
 75             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
 76         </div>
 77         <div class="item">
 78             <img src="images/6.jpg" alt="">
 79             <p>花非花,雾非雾,夜半来,天明去,来如春梦来如春梦不多时,去似朝云无觅处。</p>
 80         </div>
 81         <div class="item">
 82             <img src="images/7.jpg" alt="">
 83             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,去,来如春梦不多时,去似朝云无觅处。</p>
 84         </div>
 85         <div class="item">
 86             <img src="images/8.jpg" alt="">
 87             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
 88         </div>
 89         <div class="item">
 90             <img src="images/9.jpg" alt="">
 91             <p>花非花,雾非雾,夜半来,天明去,来如春梦来如春梦不多时,去似朝云无觅处。</p>
 92         </div>
 93         <div class="item">
 94             <img src="images/10.jpg" alt="">
 95             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,去,来如春梦不多时,去似朝云无觅处。</p>
 96         </div>
 97         <div class="item">
 98             <img src="images/11.jpg" alt="">
 99             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
100         </div>
101         <div class="item">
102             <img src="images/12.jpg" alt="">
103             <p>花非花,雾非雾,夜半来,天明去,来如春梦来如春梦不多时,去似朝云无觅处。</p>
104         </div>
105         <div class="item">
106             <img src="images/13.jpg" alt="">
107             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,去,来如春梦不多时,去似朝云无觅处。</p>
108         </div>
109         <div class="item">
110             <img src="images/14.jpg" alt="">
111             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
112         </div>
113         <div class="item">
114             <img src="images/15.jpg" alt="">
115             <p>花非花,雾非雾,夜半来,天明去,来如春梦来如春梦不多时,去似朝云无觅处。</p>
116         </div>
117         <div class="item">
118             <img src="images/16.jpg" alt="">
119             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,去,来如春梦不多时,去似朝云无觅处。</p>
120         </div>
121         <div class="item">
122             <img src="images/17.jpg" alt="">
123             <p>,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
124         </div>
125         <div class="item">
126             <img src="images/18.jpg" alt="">
127             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
128         </div>
129         <div class="item">
130             <img src="images/19.jpg" alt="">
131             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
132         </div>
133         <div class="item">
134             <img src="images/20.jpg" alt="">
135             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
136         </div>
137         <div class="item">
138             <img src="images/21.jpg" alt="">
139             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
140         </div>
141         <div class="item">
142             <img src="images/22.jpg" alt="">
143             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
144         </div>
145         <div class="item">
146             <img src="images/23.jpg" alt="">
147             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
148         </div>
149         <div class="item">
150             <img src="images/23.jpg" alt="">
151             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
152         </div>
153         <div class="item">
154             <img src="images/25.jpg" alt="">
155             <p>花非花云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
156         </div>
157         <div class="item">
158             <img src="images/26.jpg" alt="">
159             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
160         </div>
161         <div class="item">
162             <img src="images/27.jpg" alt="">
163             <p>花非花,雾非雾,夜半来,天明去,来如春梦不多时,去似朝云无觅处。花非花,雾非雾,夜半来,天明去,,夜半来,天明去,,夜半来,天明去,来如春梦不多时,去似朝云无觅处。</p>
164         </div>
165     </div>
166     <div class="btn loading">正在加载中...</div>
167 </div>
168 <script src="js/jquery.min.js"></script>
169 <script src="js/jquery.waterfall.js">
170 
171 </script>
172 <script>
173 window.onload  = function () {
174     $(.items).WaterFall();
175 }
176 </script>
177 </body>
178 </html>
点击查看(静态)

 

整体效果如下:

技术分享

 

 

 

 

注:简单扩展,仅供学习参考

需要更好更全面的插件可以去  ----->>>   http://www.jq22.com/

 

技术分享

利用jQuery来扩展一个瀑布流插件