jQuery Wookmark

The Wookmark jQuery plugin

wookmark.com上的网格布局很好看，同时他们收到了有关于询问这个插件为什么这么好看的一些邮件，所以他们创建了Wookmark这个简单的插件。它在一个动态列表格中展现了一系列的元素。这些涉及到了 Web Appers, Design Shack, Web Design Ledger,SpeckyBoy, Queness, Web Resources Depot, HongKiat,DevSnippets, CodeVisually, How Design, Tympanus, David Walsh,JaxEnter 等等。

如何使用Wookmark

1.从Github repository上下载插件包

2.将该文件包含进来（必须在jQuery引入后引入）

<script type="text/javascript" src="jquery.wookmark.js"></script>

3.启动

<script type="text/javascript">$('#myContent li').wookmark();</script>

4.调整选项（所有的选项示例可以到 GitHub 上看）

• align - "left", "right", or "center"
• autoResize - 如果是 "true", 当浏览器调整大小后自动调整布局
• resizeDelay - 默认是 "50", 当浏览器的大小和布局更新后在这个时间内会自动调整布局
• comparator - 自定义排序函数
• container - 利用这个元素的宽度是用来计算列的数量, 默认是 "window". 例如： $('myContentGrid')。同时容器也应该有这个属性 "position: relative"
• direction - "left" or "right", 在左上角还是在右上角开始
• ignoreInactiveItems - 如果是 "true", 活动依然是可见的，但是颜色会淡一些
• itemWidth -网格项像素宽度(“200”)或百分比(“10%”),默认为第一项的宽度
• fillEmptySpace - 如果是 "true", 在每一个列的底部创建一个占位符，以保证能够能够是偶数. 占位符有一个class样式是 "wookmark-placeholder"
• flexibleWidth - "true" or "false", 根据浏览器的宽度调整项的宽度，以创建最优布局
• offset - 垂直和水平距离项,默认为2
• onLayoutChanged - 布局变化后调用的函数
• outerOffset - 默认是"0"

更多的示例如 (sorting, filtering, stamping, endless scroll, lightbox, API integration...) 大家可以在 Wookmark on github 上看到. 

另外，我也会像以前那样将实践后的心得，在评论中又算展现，大家一起学习。