原文链接: 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的更多相关文章

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

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

  2. jQuery瀑布流插件masonry

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

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

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

  4. jQuery瀑布流插件 Masonry

    http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/

  5. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  6. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  7. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  8. 瀑布流插件(jquery.masonry.js)

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  9. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

随机推荐

  1. 安卓高级 Android图片缓存之初识Glide

    前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...

  2. proc文件系统探索 之 根目录下的文件[三]

    包括对proc根目录下meminfo文件的解析. > cat /proc/meminfo   读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. MemTotal: 507 ...

  3. 微信小程序实例-摇一摇抽奖

    概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...

  4. javascript中的XML

    IE下创建DOM并载入XML var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load(url); //载入X ...

  5. Linux内核分配内存的方式

    page = alloc_pages(GFP_KERNEL, get_order(1234));分配失败返回NULLGFP_KERNEL  ---> 分配标志,当没有足够内存分配时,睡眠阻塞,直 ...

  6. Android游戏开发之SurfaceView的使用-android学习之旅(五)

    SurfaceView和View的区别 View是在ui主线程中,直接响应用户的操作,以及任务的分发,但是任务比较复杂会出现阻塞. SurfaceView则不会出现这种问题,以为它直接从内存等取得图像 ...

  7. android AlarmManager讲解

    Android系统闹钟定时功能框架,总体来说就是用数据库存储定时数据,有一个状态管理器来统一管理这些定时状态的触发和更新.在Andriod系统中实现定时功能,最终还是要用到系统提供的AlarmMana ...

  8. 最简单的基于libVLC的例子:最简单的基于libVLC的推流器

    ===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...

  9. 【java集合框架源码剖析系列】java源码剖析之java集合中的折半插入排序算法

    注:关于排序算法,博主写过[数据结构排序算法系列]数据结构八大排序算法,基本上把所有的排序算法都详细的讲解过,而之所以单独将java集合中的排序算法拿出来讲解,是因为在阿里巴巴内推面试的时候面试官问过 ...

  10. 看人装X,我就来气,开启极限装X模式

    本文书写,纯属扯淡,请勿观看 4进制比二进制更合理,在01的状态中添加了两种状态,从无到有和从有到无的两种过度状态. 如果非要用数值表示,用概率表示.01作为近代计算机的基础,但终究淘汰,构成下一代计 ...