简单了解jQuery.fn.extend()

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

（截图来自jQuery文档）

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

扩展代码如下

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 (function($){

     $.fn.WaterFall = function () {

         /*

          * 瀑布流插件

          * 容器的宽度固定

          * 子容器的宽度也固定

          * 显示多少列固定

          * */

         /*初始化的元素 设定的是大容器*/

         var $parentBox = $(this);/*这里this指向的是设置瀑布流的容器*/

         var parentWidth = $parentBox.width();/*大容器的宽度*/

         var $itemsBox = $parentBox.children();/*所有的子容器*/

         var itemWidth = $itemsBox.width();/*子容器的宽度*/

         var col = 5 ;/*列数*/

         var space = (parentWidth - col*itemWidth)/(col-1);/*间距*/

         /*布局 定位*/

         /*记录每一列的高度*/

         var arrHeight = [];

         $itemsBox.each(function (index, item) {

             /*每一个子容器*/

             var $item = $(item);

             //console.log(index,item);

             /*前五个*/

             if(index < col){

                 /*记录arrHeight*/

                 arrHeight[index] = $item.height();

                 $item.css({top:'0',left:(itemWidth+space)*index});

             }else{

                 /*其他的子容器*/

                 /*找到最矮的一列*/

                 /*当前这列的高度 和 索引*/

                 var minHeight = arrHeight[0];

                 var minIndex = 0;

                 for(var i=0;i<arrHeight.length;i++){

                     if(minHeight > arrHeight[i]){

                         minHeight = arrHeight[i];

                         minIndex = i;

                     }

                 }

                 /*定位*/

                 $item.css({top:minHeight+space,left:minIndex*(itemWidth+space)});

                 arrHeight[minIndex] = minHeight + space + $item.height();

             }

         });

         /*赋值高度*/

         var maxHeight = arrHeight[0];

         for(var i = 0 ; i < arrHeight.length ; i++){

             if(maxHeight < arrHeight[i]){

                 maxHeight = arrHeight[i];

             }

         }

      $parentBox.height(maxHeight);

     }

 })(jQuery);

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

调用代码如下

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 <!--引入jQuery-->

 <script src="js/jquery.min.js"></script>

 <!--引入刚刚扩展的瀑布流插件-->

 <script src="js/jquery.waterfall.js"></script>

 <!--调用方法-->

 <script>

     window.onload  = function () {

         $('要选择的容器').WaterFall();/*js代码里面的this指向的就是这个容器*/

     }

 </script>

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

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         body{

             margin: 0;

             padding: 0;

             font-family: "Microsoft Yahei";

             background: #f5f5f5;

         }

         .container{

             width: 1200px;

             margin: 0 auto;

             padding-top: 40px;

         }

         .container > .items {

             position: relative;

         }

         .container > .items > .item {

             width: 232px;

             position: absolute;

             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

         }

         /*目的是固定高度且不一样*/

         .container > .items > .item > img {

             width: 100%;

             display: block;

             height: 250px/*目的是固定高度且不一样*/

         }

         .container > .items > .item > p {

             margin: 0;

             padding: 10px;

             background: #fff;

         }

         .container > .btn {

             width: 280px;

             height: 40px;

             margin: 30px auto;

             text-align: center;

             line-height: 40px;

             background-color: #CCC;

             border-radius: 6px;

             font-size: 24px;

             cursor: pointer;

         }

         .container > .loading {

             background-color: transparent;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="items">

         <div class="item">

             <img src="data:images/1.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/2.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/3.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/4.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/5.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/6.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/7.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/8.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/9.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/10.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/11.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/12.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/13.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/14.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/15.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/16.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/17.jpg" alt="">

             <p>，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/18.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/19.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/20.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/21.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/22.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/23.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/23.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/25.jpg" alt="">

             <p>花非花云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/26.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

         <div class="item">

             <img src="data:images/27.jpg" alt="">

             <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>

         </div>

     </div>

     <div class="btn loading">正在加载中...</div>

 </div>

 <script src="js/jquery.min.js"></script>

 <script src="js/jquery.waterfall.js">

 </script>

 <script>

 window.onload  = function () {

     $('.items').WaterFall();

 }

 </script>

 </body>

 </html>

点击查看（静态）

整体效果如下：

注：简单扩展，仅供学习参考

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

利用jQuery来扩展一个瀑布流插件的更多相关文章

  1. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

  2. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  3. vue 写一个瀑布流插件

    效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue  组件文件 <template> <div class ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  6. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  7. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  8. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  9. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

随机推荐

  1. ajax 传递JSON对象参数

    https://msdn.microsoft.com/zh-cn/library/cc836466(v=vs.94).aspx https://msdn.microsoft.com/zh-cn/lib ...

  2. 分布式缓存技术memcached学习（五）—— memcached java客户端的使用

    Memcached的客户端简介 我们已经知道,memcached是一套分布式的缓存系统,memcached的服务端只是缓存数据的地方,并不能实现分布式,而memcached的客户端才是实现分布式的地方 ...

  3. 基于RXTX的串口通讯 windows64位系统可用

    项目地址 http://download.csdn.net/detail/xqshishen/7739539

  4. hihoCoder1388 Periodic Signal（2016北京网赛F：NTT）

    题目 Source http://hihocoder.com/problemset/problem/1388 Description Profess X is an expert in signal ...

  5. PHP mysql基础操作

    mysql连接操作 //建立连接$con = mysql_connect('localhost', 'root', '123456');//判断是否连接成功if($con){ die('连接失败!'. ...

  6. .NET 二维码生成（ThoughtWorks.QRCode）

    引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...

  7. quartz与spring进行集成

    上一篇将了quartz框架的使用,spring同样也提供了对quartz的集成.这次就尝试一下在spring中集成quartz. 要在spring中使用job,Trigger和Scheduler,就要 ...

  8. node.js中module.export与export的区别。

    对module.exports和exports的一些理解 可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了. exports = module.exports ...

  9. Git系列教程二 基础介绍

    一.存储方式 如果让我们设计一个版本控制系统,最简单的方式就是每做一次更改就生成一个新的文件. 这样的方式太占用空间,所以传统的版本控制系统都是保存一个文件的某个版本的全部内容以及其他版本相对于这个版 ...

  10. linux的sysctl基本配置

    # Controls the use of TCP syncookiesnet.ipv4.tcp_syncookies = 1 # me write paramnet.ipv4.tcp_timesta ...