使用方法:

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. EF 实体映射

    1.继承自EntityTypeConfiguration 2.ToTable映射表名 3.HasKey映射主键,Property配置属性,并返回PrimitivePropertyConfigurati ...

  2. BZOJ3784 : 树上的路径

    树的点分治,在分治的时候将所有点到根的距离依次放入一个数组q中. 对于一棵子树里的点,合法的路径一定是q[L]..q[R]的某个数加上自己到重心的距离. 定义五元组(v,l,m,r,w),表示当前路径 ...

  3. 【BZOJ】3289: Mato的文件管理(莫队算法+树状数组)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3289 很裸的莫队... 离线了区间然后分块排序后,询问时搞搞就行了. 本题中,如果知道$[l, r] ...

  4. Stackoverflow架构

    Stackoverflow用的是.net开发的,用的缓存是Redis,Stackoverflow架构的演讲地址是:http://www.infoq.com/cn/presentations/archi ...

  5. OpenCV学习笔记——点击显示鼠标坐标

    点击显示鼠标显示坐标,再次点击时上一次的坐标的会消失…… #include<highgui.h> #include<cv.h> void on_mouse(int event, ...

  6. Windows编译安装OpenSSL

    windows下使用vs2008中的nmake编译安装openssl的脚本build.bat: echo off & color 0A :: 项目名称 set PROJECT=openssl ...

  7. 【ZZ】 DShader之位移贴图(Displacement Mapping)

    http://www.myexception.cn/other/1397638.html DShader之位移贴图(Displacement Mapping) www.MyException.Cn   ...

  8. PHP 错误与异常 笔记与总结(3)PHP 配置文件(php.ini)中与错误相关的选项 与 设置错误级别

    [PHP 配置文件中与错误相关的选项 ] 选项 描述 error_reporting 设置错误报告的级别 display_errors 是否显示错误 log_errors 设置是否将错误信息记录到日志 ...

  9. RadioGroup和ViewPager实现Tab

    Activity的布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  10. oracle 内联同时删除多表

    在 MySql 中,内联同时删除多表可以使用这样的语法: DELETE t1,t2 FROM table1 AS t1 INNER JOIN table2 t2 ... INNER JOIN tabl ...