代码改变世界

jQuery Wookmark

2013-12-27 17:48  低调de草原狼  阅读(191)  评论(0)  编辑  收藏  举报

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 上看到. 


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