利用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 ...
随机推荐
- iOS模糊效果(毛玻璃效果)的实现
前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解.但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番. ...
- 如何使用XShell登录亚马逊EC2云服务器
http://jingyan.baidu.com/article/a3a3f811d5fc338da2eb8a00.html
- html上下结构（上部固定高度，下部平铺）
html页面上下结构: 上部固定,下部平铺 <div id="page_header"></div> <div id="page_conte ...
- WebRTC手记之初探
转载请注明出处:http://www.cnblogs.com/fangkm/p/4364553.html WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏 ...
- jpa语句报 org.springframework.dao.InvalidDataAccessApiUsageException: Parameter with that position [2] did not exist; nested exception is java.lang.IllegalArgumentException: Parameter with that position
@Query("SELECT area from Area AS area WHERE area.state=0 AND area.name like %?1% ")Area fi ...
- FineUI 基于 ExtJS 的专业 ASP.NET 控件库
FineUI 基于 ExtJS 的专业 ASP.NET 控件库 http://www.fineui.com/
- Bootstrap个人总结
Bootstrap框架 1.以栅栏式布局,分12列,16列,24列和32列,常用12列. 2.整个页面必须在container容器内部 3.移动端以 <meta name="viewp ...
- Learn ZYNC (6)
最近在关注的问题是怎么样从ps端丢数据到ram, 然后用ip核进行处理后再输送到ram,ps端可以读取. 参考文献:[OpenHW参赛手记]AXI-Stream接口开发详细流程 首先按照作者的探索思路 ...
- 第一章-第五题（你所在的学校有计算机科学专业和软件工程专业么？相关专业的教学计划和毕业出路有什么不同？阅读有关软件工程和计算机科学的区别的文章，谈谈你的看法。）--By 侯伟婷
我所在的本科学校和研究生学校都有计算机科学专业和软件工程专业.具体的教学计划无从得到,所以此情况无从对比,但是我从本科教务处网站找到了计算机科学专业和软件工程专业有关专业方面的课程,现列表如下. 表格 ...
- Oracle ORA-01722: 无效数字 处理方法
C# + Oralce 10G 项目中 有用参数处理Update语句.参数命名和表字段同名.执行报错: ORA-01722: 无效数字 后修改所有的参数和对应字段不同.解决. 修改前: StringB ...