myWaterfall - jQuery瀑布流布局插件

Demo

http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/

Github

https://github.com/xjnotxj/myWaterfall

Usage

  1. <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  2. <script src="js/myWaterfall.js"></script>

HTML结构

div.box-content中嵌入自定义的内容:

  1. <div class="waterfall-container">
  2. <div class="box">
  3. <div class="box-content">
  4. <img src="http://cdn2.mhpbooks.com/2016/02/google.jpg">
  5. <p>谷歌公司成立于1998年9月4日,被公认为全球最大的搜索引擎。</p>
  6. </div>
  7. </div>
  8.    …………
  9. </div>

属性


  1. $(".waterfall-container").waterfall({
  2.            //以下为默认缺省参数
  3. autoResize: true, // 当浏览器大小改变时是否自动调整
  4. offsetWidth: 5, // 每个元素之间的宽度距离(不加单位默认px)
  5. offsetHeight: 20, // 每个元素之间的高度距离(不加单位默认px)
  6. itemWidth: 200, // 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了
  7. colNumber: 4, // 规定一行有几个元素,只有autoResize: false才生效
  8. colNumberMin: 2, // 规定一行最小有几个元素
  9. colNumberMax: 5, // 规定一行最大有几个元素
  10. resizeDelay: 0 // 自动调整延迟时间,一般情况下不需要设置,默认的就好了
  11. });

方法

init - 初始化 开启布局

$(".waterfall-container").waterfall('init');

等效于

$(".waterfall-container").waterfall({});

destroy - 关闭布局

$(".waterfall-container").waterfall('destroy');

layout - 手动刷新布局

$(".waterfall-container").waterfall('layout');

myWaterfall - jQuery瀑布流布局插件的更多相关文章

  1. jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡

    调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...

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

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

  3. Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。

    瀑布流布局插件, 类似于 Pinterest.花瓣.发现啦. En 中文 文档 下载 下载waterfall插件最新版本. 使用 html: <div id="container&qu ...

  4. Jquery瀑布流布局

    瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

  5. 网页瀑布流布局插件Masonry

    CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...

  6. Jquery瀑布流布局,jQuery Wookmark Load 示例

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸同意的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 注意事项:img元素的width和weight属性需要写,否则定位会不准确. 查看j ...

  7. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  8. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  9. jQuery 瀑布流插件: Wookmark

    原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...

随机推荐

  1. 【noip 2016】 蚯蚓(50分)(earthworm)

    50分小程序,写了2天- 题目在这里 一个单调队列,写的都是p=0的点,考试的时候要是弄到这些分的话--不说了-- 羡慕AC的神犇啊,54行的满分程序,而我-- #include <iostre ...

  2. MySQL数据表range分区例子

    某些行业数据量的增长速度极快,随着数据库中数据量的急速膨胀,数据库的插入和查询效率越来越低.此时,除了程序代码和查询语句外,还得在数据库的结构上做点更改:在一个主读辅写的数据库中,当数据表数据超过10 ...

  3. C语言内存分配

      (1)代码区(text segment).存放CPU执行的机器指令(machine instructions).通常,代码区是可共享的 (即另外的执行程序可以调用它),因为对于频繁被执行的程序,只 ...

  4. Unity - 接入Android SDK

    在网络上,关于Unity与Android如何进行交互,雨松MOMO大神已经有两篇文章简单介绍了如何操作(1)Unity3D研究院之打开Activity与调用JAVA代码传递参数(2)Unity3D研究 ...

  5. 跟服务器交互的登录Demo

    服务器写死 账号密码,演示登录 服务器代码: 开发工具MyEclipse public class LoginServlet extends HttpServlet { /** * The doGet ...

  6. Repeater的分页

      Repeater控件是个好东西.轻量级.又好用.完全的自定义.但是,正是因为这些优点它没有自动分页的功能.这个需要研究一下.我看了一下起点等小说网站,那些什么推荐排名榜用Repeater控件那是很 ...

  7. 什么情况下才要重写Objective-C中的description方法

    特别注意: 千万不要在description方法中同时使用%@和self,同时使用了%@和self,代表要调用self的description方法,因此最终会导致程序陷入死循环,循环调用descrip ...

  8. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  9. UI控件(UIPickerView)

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...

  10. Hadoop学习笔记—19.Flume框架学习

    START:Flume是Cloudera提供的一个高可用的.高可靠的开源分布式海量日志收集系统,日志数据可以经过Flume流向需要存储终端目的地.这里的日志是一个统称,泛指文件.操作记录等许多数据. ...