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

简单了解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来扩展一个瀑布流插件的更多相关文章

基于jQuery封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化调用这个方法的时候的那个jquery选着到的dom对象 this* ...
原生 JS 实现一个瀑布流插件
更好的阅读体验,点击原文地址瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
vue 写一个瀑布流插件
效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class ...
8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
jquery.masonry瀑布流插件的4个使用步骤
1.分别加载jquery插件与jquery.masonry插件两个文件下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...
瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

随机推荐

Delphi Webbrowser 修改 textarea 值百度
有个按钮调用 <a href="#" onclick="$.ajax({url: '/redmine/journals/edit/29606.js', type ...
朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现
翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...
数学 SRM 690 Div1 WolfCardGame 300
Problem Statement Wolf Sothe and Cat Snuke are playing a card game. The game is played with exa ...
JS 之Blob 对象类型
原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...
OS X El Capitan的 U 盘制作过程
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末如果觉得本文内容过长,请前往本人 “简书” 0.在 AppStore 下载 OS X El Capitan AppStore ...
【资源】NOIP2013测试数据senior/junior 普及/提高数据
https://yunpan.cn/cRSepfcG4XX3V 访问密码 48e1 NOIP2013测试数据senior/junior 普及/提高数据都在了
图片过大，在div中不压缩的居中方法
在图片全屏轮播时,为了兼容更大的屏幕,我们常常把图片设置为很大,但是在显示的过程中,如果让图片随浏览器自动变化的话,常常会把图片压缩变形,影响显示,在不压缩图片的情况下,如何只显示图片的中间部分呢? ...
trie字典树详解及应用
原文链接 http://www.cnblogs.com/freewater/archive/2012/09/11/2680480.html Trie树详解及其应用一.知识简介 ...
页面引入flash
function shFlashObj(id, data, oWidth, oHeight, flashvals,beFullScreen) { var swf='<object id=& ...
Secure Digital
https://en.wikipedia.org/wiki/Secure_Digital#Technical_details Secure Digital (SD) is a non-volatile ...

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

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

随机推荐

热门专题