javascript代码实例教程-jQuery Wookmark

发布时间:2019-02-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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 上看到.


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

    觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

    脚本宝典总结

    以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery Wookmark全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery Wookmark所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。