使用方法:

1、下载wookmark.js

2、构建html

<div class="wrapper">
<div id="con1_1">
<div class="product_list"> <a href="#"><img src="data:images/img6.jpg"></a><p>1</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img4.jpg"></a><p>2</p> </div>
<div class="product_list"> <a href="#"><img src="data:images/img1.jpg"></a><p>3</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img2.jpg"></a><p>4</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img3.jpg"></a><p>5</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img5.jpg"></a><p>6</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img8.jpg"></a><p>7</p></div>
<div class="product_list"> <a href="#"><img src="data:images/img7.jpg"></a><p>8</p></div>
</div>
</div>

3、直接js调用则

<script type="text/javascript" src="js/wookmark.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var wookmark1 = new Wookmark('#con1_1', {
outerOffset: 10, // Optional, the distance to the containers border
itemWidth: 200 // Optional, the width of a grid item
}); };
</script>

如果是jquery调用则:

  <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wookmark.min.js"></script>
<script type="text/javascript">
$('#con1_1').wookmark();
$('.myElements').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('body'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
</script>

参数说明:

align – "left", "right", 和"center"

autoResize – 如果为 "true", 浏览器改变大小后更新图层

resizeDelay – 默认 "50"毫秒, 浏览器改变大小与图片更新间的间隔时长

comparator -自定义排序函数

container -装载动态网格的元素, 默认 "window". 如 $('myContentGrid'). 该容器需要要CSS属性 "position: relative".

direction – "left" 或者 "right", 从左上角还是右上角开始

ignoreInactiveItems – 如果为 "true",激活的项目是可见的, 用可过滤项目

itemWidth – item的宽度,可以是像素,也可以是百分比。 默认为第一个项目的宽度。

fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。

flexibleWidth – "true" or "false", 基于浏览器的大小动态调整item的最佳尺寸。

offset – item与item间横向坚向的间隔, 默认为 2

onLayoutChanged – 图层改变后调用的函数

outerOffset – 默认值 "0"

下载>>

jQuery插件之Wookmark瀑布流的更多相关文章

  1. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

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

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

  3. 在 JQuery Mobile 中实现瀑布流图库布局

    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...

  4. 服务器代理+jQuery.ajax实现图片瀑布流

    服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...

  5. 转:jQuery插件之Wookmark:流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案

    谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js: 1.<script src="/js/jqu ...

  6. 【jQuery Demo】图片瀑布流实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...

  7. 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...

  8. 基于jQuery的简易瀑布流实现

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

随机推荐

  1. ZOJ2770 Burn the Linked Camp(差分约束系统)

    区间和一定要联系到前缀和. 这题,把前缀和看作点,从s0到sn: 对于每一个营地i的容量capi,有这么个关系si-si-1<=capi: 对于每一个区间的评估i,j,k,有sj-si-1> ...

  2. ural 1246. Tethered Dog

    1246. Tethered Dog Time limit: 1.0 secondMemory limit: 64 MB A dog is tethered to a pole with a rope ...

  3. python 代码片段9

    #coding=utf-8 # 字符串指示符号 r表示raw u表示unicode mystring=u'this is unicode!--by' print mystring # 'raw'表示告 ...

  4. ZOJ 3626(树形DP+背包+边cost)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3626 题目大意:树中取点.每过一条边有一定cost,且最后要回 ...

  5. android 常用第三方包的代码混淆

    首先在:project.properties 文件下,启动代码混淆 proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:pro ...

  6. 字符串全排列(permutation)

    Reference: http://www.cnblogs.com/sujz/archive/2011/06/16/2082831.html 问题:给定字符串S,生成该字符串的全排列. 方法1:依次从 ...

  7. BZOJ4230: 倒计时

    4230: 倒计时 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 20  Solved: 12[Submit][Status][Discuss] De ...

  8. 禁止ViewState的3种解决方法

    默认情况下,ViewState是被启用的,比如提交表单后,表单中输入的值会自动保留.但是如果不需要保留,也可以将其禁用,这样可以节省资源.   下面3种方式就可以分别禁用某一个控件.某一个页面和整个应 ...

  9. hdu-acm steps Monkey and Banana

    这道题是典型的dp题.首先是数据的处理上,因为每个长方体的3条不同长度的棱都可以作为高,因此一个长方体可以看成3个不同的长方体.从而将数据扩展为3*n,然后将所有的长方体以长度为第一排序条件,宽度为第 ...

  10. 矢量图标转成16*16大小的SVG格式

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:一一链接:http://www.zhihu.com/question/32233782/answer/68629385来源:知 ...