myWaterfall - jQuery瀑布流布局插件

Demo

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

Github

https://github.com/xjnotxj/myWaterfall

Usage

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

HTML结构

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

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

属性


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

方法

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. Ibatis 使用心得

    (1)建表语句 sqlMap: <statement id="createTable" parameterClass="String" > $sql ...

  2. Pyserial操作串口

    pySerial 介绍 封装了串口通讯模块,支持Linux.Windows.BSD(可能支持所有支持POSIX的操作系统),支持Jython(Java)和IconPython(.NET and Mon ...

  3. 完美解决 Linux 下 Sublime Text 中文输入

    首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...

  4. PHP的函数应用

    1.全部变量 全局变量也称为外部变量,是在函数的外部定义的,它的作用域为从变量定义处开始,到本程序文件的结尾.和其他编程语言不同,全局变量不是自动设置为可用的.在PHP中,由于函数可以视为单独的程序片 ...

  5. #IrrlichtEngine# Example1 HelloWorld

    配置IDE环境来使用irrlicht引擎: (VS2012下)菜单栏项目 -> 项目属性窗口下 C/C++ -> 常规 -> 附加包含目录中添加irrlicnt引擎文件目录下incl ...

  6. Expert 诊断优化系列-------------针对重点语句调索引

    上一篇我们说了索引的重要性,一个索引不仅能让一条语句起飞,也能大量减少系统对CPU.内存.磁盘的依赖.我想上一篇中的例子可以说明了.给出上一篇和目录文链接: SQL SERVER全面优化------- ...

  7. Prim 最小生成树算法

    Prim 算法是一种解决最小生成树问题(Minimum Spanning Tree)的算法.和 Kruskal 算法类似,Prim 算法的设计也是基于贪心算法(Greedy algorithm). P ...

  8. Unicode编码解码在线转换工具

    // Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...

  9. JS实战 · 级联菜单选择省份和城市(两种)

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  10. oracle 备份数据库对象(存储过程PROCEDURE,FUNCTION,VIEW,TRIGGER...)

    开发过程中,需要不停的备份数据库对象, 特别是存储过程, 每次手动备份不免很低能啊 历经几次修改终于, 完美了,O(∩_∩)O哈哈~      (当然,你也可以再改简便一点~~~) select db ...