jQuery插件之Wookmark瀑布流
使用方法:
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瀑布流的更多相关文章
- jquery实现无限滚动瀑布流实现原理
现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 在 JQuery Mobile 中实现瀑布流图库布局
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
- 服务器代理+jQuery.ajax实现图片瀑布流
服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...
- 转:jQuery插件之Wookmark:流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案
谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js: 1.<script src="/js/jqu ...
- 【jQuery Demo】图片瀑布流实现
瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...
- 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)
做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...
- 基于jQuery的简易瀑布流实现
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
随机推荐
- EF 实体映射
1.继承自EntityTypeConfiguration 2.ToTable映射表名 3.HasKey映射主键,Property配置属性,并返回PrimitivePropertyConfigurati ...
- BZOJ3784 : 树上的路径
树的点分治,在分治的时候将所有点到根的距离依次放入一个数组q中. 对于一棵子树里的点,合法的路径一定是q[L]..q[R]的某个数加上自己到重心的距离. 定义五元组(v,l,m,r,w),表示当前路径 ...
- 【BZOJ】3289: Mato的文件管理(莫队算法+树状数组)
http://www.lydsy.com/JudgeOnline/problem.php?id=3289 很裸的莫队... 离线了区间然后分块排序后,询问时搞搞就行了. 本题中,如果知道$[l, r] ...
- Stackoverflow架构
Stackoverflow用的是.net开发的,用的缓存是Redis,Stackoverflow架构的演讲地址是:http://www.infoq.com/cn/presentations/archi ...
- OpenCV学习笔记——点击显示鼠标坐标
点击显示鼠标显示坐标,再次点击时上一次的坐标的会消失…… #include<highgui.h> #include<cv.h> void on_mouse(int event, ...
- Windows编译安装OpenSSL
windows下使用vs2008中的nmake编译安装openssl的脚本build.bat: echo off & color 0A :: 项目名称 set PROJECT=openssl ...
- 【ZZ】 DShader之位移贴图(Displacement Mapping)
http://www.myexception.cn/other/1397638.html DShader之位移贴图(Displacement Mapping) www.MyException.Cn ...
- PHP 错误与异常 笔记与总结(3)PHP 配置文件(php.ini)中与错误相关的选项 与 设置错误级别
[PHP 配置文件中与错误相关的选项 ] 选项 描述 error_reporting 设置错误报告的级别 display_errors 是否显示错误 log_errors 设置是否将错误信息记录到日志 ...
- RadioGroup和ViewPager实现Tab
Activity的布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- oracle 内联同时删除多表
在 MySql 中,内联同时删除多表可以使用这样的语法: DELETE t1,t2 FROM table1 AS t1 INNER JOIN table2 t2 ... INNER JOIN tabl ...