jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark
在线示例: jQuery Wookmark Demo
Wookmark官网: http://www.wookmark.com/jquery-plugin
翻译人员: 铁锚
原文日期: 2013年03月05日
翻译日期: 2014年02月22日
当你第一次打开 图片分享网站Pinterest 时,你可能会由衷地赞叹: "哇,每列图的宽度都是相同的,而所有的图片都被裁剪显示为正确的比例."
普通用户可能觉得没什么,但作为一名开发人员,我可以领会到他们对设计、创新和实现的努力,包括服务器端和客户端。这也是我爱上 Wookmark 的原因 —— 用来创建一致图像布局效果的jQuery插件.
下面我们一起来看看如何使用 Wookmark插件 :
开发的工作大概只需要几分钟即可完成。首先是将img图片以某种标签包装起来,比如我们可以使用列表
<li>:
<ul id="tiles"> <li><img src="data:images/image_1.jpg" width="200" height="283"><p>1</p></li> <li><img src="data:images/image_2.jpg" width="200" height="300"><p>2</p></li> <li><img src="data:images/image_3.jpg" width="200" height="252"><p>3</p></li> <li><img src="data:images/image_4.jpg" width="200" height="158"><p>4</p></li> <li><img src="data:images/image_5.jpg" width="200" height="300"><p>5</p></li> <li><img src="data:images/image_6.jpg" width="200" height="297"><p>6</p></li> <li><img src="data:images/image_7.jpg" width="200" height="200"><p>7</p></li> <li><img src="data:images/image_8.jpg" width="200" height="200"><p>8</p></li> <li><img src="data:images/image_9.jpg" width="200" height="398"><p>9</p></li> <li><img src="data:images/image_10.jpg" width="200" height="267"><p>10</p></li> <li><img src="data:images/image_1.jpg" width="200" height="283"><p>11</p></li> <li><img src="data:images/image_2.jpg" width="200" height="300"><p>12</p></li> <li><img src="data:images/image_3.jpg" width="200" height="252"><p>13</p></li> <!-- ... --> </ul>
图像应该在服务器端预先设置相同的宽度,当然,如有必要,你也可以在客户端强制改变其宽度。图片HTML创建好之后,就可以使用jQuery插件来做那些杂乱的工作:
$(document).ready(new function() { // 调用插件的布局函数. $('#tiles li').wookmark({ autoResize: true, // 当浏览器大小改变时会自动更新布局 container: $('#tiles'), // 可选配置项, 用于一些额外的CSS样式 offset: 2, // 可选配置项, 表格项(item)的间距 itemWidth: 210 // 可选配置项, 表格项(item)的宽度 }); });
Wookmark还包括一些额外的选项用来自定义 列的外观,并可以在 window 改变大小时调整列宽 —— 非常棒的特性!
Wookmark是一心只做一件事又做得非常好的插件,。如果你想创建一个优雅,且风格统一的照片画廊(gallery),用Wookmark试一试,我认为你将会留下深刻的印象!
官方指导手册:http://www.wookmark.com/jquery-plugin
翻译如下:
1. 从Github下载 Wookmark-jQuery插件: 或者
点击此处下载ZIP包
2. 在引入jQuery之后引入script:
<script type="text/javascript" src="jquery.wookmark.js"></script>
3. 在 JS代码之中调用:
$('#myContent li').wookmark();
4. 根据需要,设置一些可选的配置项: (在GitHub仓库 和 ZIP包之中有示例 )
- align - 对齐: "left", "right", 或 "center"
- autoResize - 如果设置为 "true", 当浏览器窗口大小改变时将自动更新布局
- resizeDelay - 默认值 "50",单位: 毫秒(milisecond),在浏览器 resize之后重新布局的延迟时间
- comparator - 指定自定义排序函数(sorting function)
- container - 该元素的 width 将被用于计算列的数量, 默认是 "window". 例如: $('myContentGrid'). Container 应该设置 CSS 属性 "position: relative".
- direction - 方向: "left" or "right", 从左上角还是右上角开始排列元素
- ignoreInactiveItems - 如果设置为 "true", 则不活跃的 items 也会可见,该选项可用于对过滤掉的 items 执行淡出效果
- itemWidth - 单个 grid item 的width,可使用像素值(例如 "200") 或者百分比 ("10%"), 默认值为第一个 item 的 width
- fillEmptySpace - 如果设置为 "true", 在每一列的底部创建占位符(placeholder ),以创建相等的布局. Placeholders 元素会被设置CSS类 "wookmark-placeholder".
- flexibleWidth - "true" or "false", 基于浏览器窗口的大小调整 item width 以创建最优布局
- offset - 在 items 之间的(水平,垂直)间距, 默认值为 2
- onLayoutChanged - 一个回调函数,当所有的布局改变后调用
- outerOffset - 默认值为 "0"
查看示例(排序、过滤、冲压、无尽的滚动,lightbox,API集成…)以及贡献名单,请访问 Wookmark on github。希望你玩得开心。
jQuery 瀑布流插件: Wookmark的更多相关文章
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery瀑布流插件masonry
项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...
- jQuery瀑布流插件——jQuery.Waterfall
插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...
- jQuery瀑布流插件 Masonry
http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 瀑布流插件(jquery.masonry.js)
什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
随机推荐
- 安卓高级 Android图片缓存之初识Glide
前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...
- proc文件系统探索 之 根目录下的文件[三]
包括对proc根目录下meminfo文件的解析. > cat /proc/meminfo 读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. MemTotal: 507 ...
- 微信小程序实例-摇一摇抽奖
概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...
- javascript中的XML
IE下创建DOM并载入XML var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load(url); //载入X ...
- Linux内核分配内存的方式
page = alloc_pages(GFP_KERNEL, get_order(1234));分配失败返回NULLGFP_KERNEL ---> 分配标志,当没有足够内存分配时,睡眠阻塞,直 ...
- Android游戏开发之SurfaceView的使用-android学习之旅(五)
SurfaceView和View的区别 View是在ui主线程中,直接响应用户的操作,以及任务的分发,但是任务比较复杂会出现阻塞. SurfaceView则不会出现这种问题,以为它直接从内存等取得图像 ...
- android AlarmManager讲解
Android系统闹钟定时功能框架,总体来说就是用数据库存储定时数据,有一个状态管理器来统一管理这些定时状态的触发和更新.在Andriod系统中实现定时功能,最终还是要用到系统提供的AlarmMana ...
- 最简单的基于libVLC的例子:最简单的基于libVLC的推流器
===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...
- 【java集合框架源码剖析系列】java源码剖析之java集合中的折半插入排序算法
注:关于排序算法,博主写过[数据结构排序算法系列]数据结构八大排序算法,基本上把所有的排序算法都详细的讲解过,而之所以单独将java集合中的排序算法拿出来讲解,是因为在阿里巴巴内推面试的时候面试官问过 ...
- 看人装X,我就来气,开启极限装X模式
本文书写,纯属扯淡,请勿观看 4进制比二进制更合理,在01的状态中添加了两种状态,从无到有和从有到无的两种过度状态. 如果非要用数值表示,用概率表示.01作为近代计算机的基础,但终究淘汰,构成下一代计 ...