myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件
Demo
http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/
Github
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瀑布流布局插件的更多相关文章
- jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡
调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。
瀑布流布局插件, 类似于 Pinterest.花瓣.发现啦. En 中文 文档 下载 下载waterfall插件最新版本. 使用 html: <div id="container&qu ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
- 网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...
- Jquery瀑布流布局,jQuery Wookmark Load 示例
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸同意的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 注意事项:img元素的width和weight属性需要写,否则定位会不准确. 查看j ...
- jQuery瀑布流插件masonry
项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...
- jQuery瀑布流插件——jQuery.Waterfall
插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...
- jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...
随机推荐
- Ibatis 使用心得
(1)建表语句 sqlMap: <statement id="createTable" parameterClass="String" > $sql ...
- Pyserial操作串口
pySerial 介绍 封装了串口通讯模块,支持Linux.Windows.BSD(可能支持所有支持POSIX的操作系统),支持Jython(Java)和IconPython(.NET and Mon ...
- 完美解决 Linux 下 Sublime Text 中文输入
首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...
- PHP的函数应用
1.全部变量 全局变量也称为外部变量,是在函数的外部定义的,它的作用域为从变量定义处开始,到本程序文件的结尾.和其他编程语言不同,全局变量不是自动设置为可用的.在PHP中,由于函数可以视为单独的程序片 ...
- #IrrlichtEngine# Example1 HelloWorld
配置IDE环境来使用irrlicht引擎: (VS2012下)菜单栏项目 -> 项目属性窗口下 C/C++ -> 常规 -> 附加包含目录中添加irrlicnt引擎文件目录下incl ...
- Expert 诊断优化系列-------------针对重点语句调索引
上一篇我们说了索引的重要性,一个索引不仅能让一条语句起飞,也能大量减少系统对CPU.内存.磁盘的依赖.我想上一篇中的例子可以说明了.给出上一篇和目录文链接: SQL SERVER全面优化------- ...
- Prim 最小生成树算法
Prim 算法是一种解决最小生成树问题(Minimum Spanning Tree)的算法.和 Kruskal 算法类似,Prim 算法的设计也是基于贪心算法(Greedy algorithm). P ...
- Unicode编码解码在线转换工具
// Unicode编码解码在线转换工具 Unicode 是基于通用字符集(Universal Character Set)的标准来发展,并且同时也以书本的形式(The Unicode Standar ...
- JS实战 · 级联菜单选择省份和城市(两种)
DOM编程步骤.思路 1.定义界面: 通过html标签将数据进行封装: 2.定义一些静态样式: 利用css: 3.需要动态地完成的和用户的交互: a:明确事件源: ...
- oracle 备份数据库对象(存储过程PROCEDURE,FUNCTION,VIEW,TRIGGER...)
开发过程中,需要不停的备份数据库对象, 特别是存储过程, 每次手动备份不免很低能啊 历经几次修改终于, 完美了,O(∩_∩)O哈哈~ (当然,你也可以再改简便一点~~~) select db ...