jQuery Wookmark

暴乐邦
2023-12-01

The Wookmark jQuery plugin

wookmark.com上的网格布局很好看,同时他们收到了有关于询问这个插件为什么这么好看的一些邮件,所以他们创建了Wookmark这个简单的插件。它在一个动态列表格中展现了一系列的元素。这些涉及到了 Web AppersDesign ShackWeb Design Ledger,SpeckyBoyQuenessWeb Resources DepotHongKiat,DevSnippetsCodeVisuallyHow DesignTympanusDavid 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 上看到


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

 类似资料:

相关阅读

相关文章

相关问答