利用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 ...
随机推荐
- 《DSP using MATLAB》示例Example5.10
代码: n = 0:10; x = 10*(0.8) .^ n; [xec, xoc] = circevod(x); %% -------------------------------------- ...
- Python lambda函数
python允许定义单行的小函数,定义lambda函数的形式如下: lambda 参数:表达式lambda函数默认返回表达式的值,可接收任意个参数,包括可选参数,但是表达式只有一个.
- 【改】iOS学习之NSAttributedString(富文本)
NSAttributedString 叫做富文本,是一种带有属性的字符串,通过它可以轻松的在一个字符串中表现出多种字体.字号.字体大小等各不相同的风格,还可以对段落进行格式化,一般都是对可变富文本(N ...
- jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- 时间js转换方法Date("149...") 转成 2016-7-12 21:23:34 009
function timeFormatter(value) { var da = new Date(parseInt(value.replace("/Date(", &q ...
- 阿里云服务器Linux CentOS安装配置（五）jetty配置、部署
阿里云服务器Linux CentOS安装配置(五)jetty配置.部署 1.官网下载jetty:wget http://repo1.maven.org/maven2/org/eclipse/jetty ...
- asp.net mvc 在视图中获取控制器与动作的名称
获取 controller 名称: ViewContext.RouteData.Values["controller"].ToString(); 获取 action 名称: Vie ...
- PHP 去除HTML标签 HTML实体转字符 br转\n
1.去除HTML标签 strip_tags(string,allow)//剥去字符串中的 HTML 标签,但允许使用 <img> 标签:$str = strip_tags($str,&q ...
- 外部函数test显示的返回内部函数add的调用
前段时间有个需求中有点击datagrid的单元格实现某种事件,皇冠现金代理调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝 ...
- 软件测试基础homework2
1.for循环里的i>0应该改为i>=0 test1:x=[3,2,5];y=2 test2:x=[3];y=2 test3:x=[2,3,5];y=4 2.for循环里的i应该倒序 te ...