Jquery瀑布流插件wookmark
2024-06-02 09:54:21
瀑布流布局在现在的网页设计里面可谓是相当的流行的，从网页到手机应用，都能见到瀑布流的身影。相比较手机应用来说，感觉网页上的瀑布流布局效果实现简单很多，因为我们有现成的jQuery插件可以用，只要稍微的引用一下，再写那么一两句调用代码，然后就没我们什么事了，瀑布流就这么呈现出来了。玩赚乐推荐的Wookmark这个插件的用法也是相当的简单。
先看下效果图：
1、首先，引入JS。
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><script</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">type</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"text/<span id="1_nwp" style="width: auto; height: auto; float: none;"><a target=_blank target="_blank" id="1_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=16&is_app=0&jk=3a7436ece0613d36&k=javascript&k0=javascript&kdi0=0&luki=6&n=10&p=baidu&q=72079049_cpr&rb=0&rs=1&seller_id=1&sid=363d61e0ec36743a&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1685536&u=http%3A%2F%2Fwww%2Ebanghui%2Eorg%2F1672%2Ehtml&urlid=0" style="color: rgb(66, 139, 202); text-decoration: none;"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">javascript</span></a></span>"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">src</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"jquery.wookmark.js"</span><span class="tag" style="color: rgb(249, 38, 89);">></script></span></li></ol>
2、布局HTML代码结构。
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><div</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">id</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"main"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">role</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"main"</span><span class="tag" style="color: rgb(249, 38, 89);">></span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><ul</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">id</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"tiles"</span><span class="tag" style="color: rgb(249, 38, 89);">></span></li><li class="L2" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);"><!-- These are our grid blocks --></span></li><li class="L3" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"><li><img</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">width</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"200"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">height</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"283"</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="atn" style="color: rgb(166, 226, 46);">original</span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="atv" style="color: rgb(230, 219, 116);">"images/image_1.jpg"</span><span class="tag" style="color: rgb(249, 38, 89);">><p></span><span class="pln" style="color: rgb(102, 217, 239);">1</span><span class="tag" style="color: rgb(249, 38, 89);"></p></li></span></li><li class="L4" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> ......</span></li><li class="L5" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);"><!-- End of grid blocks --></span></li><li class="L6" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="tag" style="color: rgb(249, 38, 89);"></ul></span></li><li class="L7" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="tag" style="color: rgb(249, 38, 89);"></div></span></li></ol>
3、接下来调用
简单调用
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">).</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">();</span></li></ol>
带参数调用
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="kwd" style="color: rgb(249, 38, 89);">function</span><span class="pun" style="color: rgb(248, 248, 242);">()</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="pun" style="color: rgb(248, 248, 242);">{</span><span class="pln" style="color: rgb(102, 217, 239);"> </span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">).</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">({</span></li><li class="L2" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> autoResize</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="kwd" style="color: rgb(249, 38, 89);">true</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 当浏览器大小改变时是否自动调整</span></li><li class="L3" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> container</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#main'</span><span class="pun" style="color: rgb(248, 248, 242);">),</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 父<span id="0_nwp" style="width: auto; height: auto; float: none;"><a target=_blank target="_blank" id="0_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=16&is_app=0&jk=3a7436ece0613d36&k=%C8%DD%C6%F7&k0=%C8%DD%C6%F7&kdi0=0&luki=1&n=10&p=baidu&q=72079049_cpr&rb=0&rs=1&seller_id=1&sid=363d61e0ec36743a&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1685536&u=http%3A%2F%2Fwww%2Ebanghui%2Eorg%2F1672%2Ehtml&urlid=0" style="color: rgb(66, 139, 202); text-decoration: none;"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">容器</span></a></span>，这个要注意的一点是该容器需要有 position: relative 属性。</span></li><li class="L4" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> offset</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">2</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 每个元素之间的距离</span></li><li class="L5" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> itemWidth</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">210</span><span class="pun" style="color: rgb(248, 248, 242);">,</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了</span></li><li class="L6" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> resizeDelay</span><span class="pun" style="color: rgb(248, 248, 242);">:</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="lit" style="color: rgb(174, 129, 255);">50</span><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="com" style="color: rgb(147, 161, 161);">// 自动调整延迟时间，一般情况下不需要设置，默认的就好了。</span></li><li class="L7" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);"> </span><span class="pun" style="color: rgb(248, 248, 242);">});</span><span class="pln" style="color: rgb(102, 217, 239);"> </span></li><li class="L8" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pun" style="color: rgb(248, 248, 242);">});</span></li></ol>
该插件可以配合ajax来实现动态加载数据，不过新增之后需要重新执行一次。如果是采用
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="kwd" style="color: rgb(249, 38, 89);">var</span><span class="pln" style="color: rgb(102, 217, 239);"> handler </span><span class="pun" style="color: rgb(248, 248, 242);">=</span><span class="pln" style="color: rgb(102, 217, 239);"> $</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="str" style="color: rgb(230, 219, 116);">'#tiles li'</span><span class="pun" style="color: rgb(248, 248, 242);">);</span></li><li class="L1" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">handler</span><span class="pun" style="color: rgb(248, 248, 242);">.</span><span class="pln" style="color: rgb(102, 217, 239);">wookmark</span><span class="pun" style="color: rgb(248, 248, 242);">(</span><span class="pln" style="color: rgb(102, 217, 239);">options</span><span class="pun" style="color: rgb(248, 248, 242);">);</span></li></ol>
这种方式的在重新绑定前需要执行一下下面的代码，做点清理工作。
<ol class="linenums" style="padding: 0px; margin: 0px 0px 0px 33px; list-style: none;"><li class="L0" style="list-style: decimal; margin-left: 0px; padding-left: 12px; color: rgb(190, 190, 197);"><span class="pln" style="color: rgb(102, 217, 239);">handler</span><span class="pun" style="color: rgb(248, 248, 242);">.</span><span class="pln" style="color: rgb(102, 217, 239);">wookmarkClear</span><span class="pun" style="color: rgb(248, 248, 242);">();</span></li></ol>
瀑布流插件官方地址：http://www.wookmark.com/jquery-plugin
瀑布流开源项目地址：https://github.com/GBKS/Wookmark-jQuery
感谢阅读，希望此款插件能在您的前端开发中发挥作用！
制作瀑布流布局的优秀插件
首先简单的向大家推荐几款制作瀑布流的jQuery插件，这些插件能帮助大家轻松的实现类似于pinterest的布局效果：
1.Masonry
Masonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局，但在垂直方向使用绝对定位来控制元素的位置，犹如彻墙一样，能做到见缝插针。
2.Isotope
Isotope是一款实现动态布局的精致jQuery插件，是单独的CSS无法实现的，而且他可以通过jQuery选择器来控制元素的显示与隐藏等。
3.Blockslt
BlocksIt.js是一个创建动态的网格布局的jQuery插件。它将HTML元素转换为“块”,它们的位置布局类似于网格布局的Pinterest一样。
4.Wookmark
Wookmark是一款简单的动态网格布局的jQuery插件。
5.Pinterest Clone Layout
这是一个客隆了Pinterest网站布局的jQuery，方便你快速创建一个类似于pinterest布局效果的站点
6.Flex
Flex是一个流体不对称的动画网格布局插件。它还有一个鼠标悬停时放大的功能。
谁在使用瀑布流布局？
下面展示的都是瀑布流布局的网站，看起来都很经典，然而看起来很熟悉,因为它们都是从Pinterest克隆出来的。否则,他们中的许多人只是简单的创造性使用动态的网格来展示他们的作品和内容。
除了这些案例之外，当然还有更优秀的，只不过我没有发现，如果大家手上还有更好的插件和案例，希望能与我们分享。谢谢大家。
原文地址：http://www.banghui.org/1672.html
Jquery瀑布流插件wookmark相关推荐
- jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin ...
- 写了个jquery瀑布流插件 ， 求各位道友猛男指点指点
如题 ,请各位大佬指点一下 ;;(function(){if(typeof jQuery === "function"){(function( factory , $ ){if($ ...
- html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
- waterfall-Jquery瀑布流插件，Jquery瀑流式插件
瀑布流插件布局在目前貌似很火爆,因为自己用jquery插件比较多,便萌生了把瀑布流插件实现的想法,图片就借用迅雷UED上的那些美图吧. 预览地址:http://www.sitejs.cn/code/d ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
- jaliswall.js图片瀑布流插件
下载地址 jaliswall.js图片瀑布流插件,jQuery响应式瀑布流布插件jaliswall dd:
最新文章
- 【踩坑记录】记一次MySQL主从复制延迟的坑
- 简述java异常处理机制
- oracle编程艺术笔记1
- 机器学习算法源码全解析（三）-范数规则化之核范数与规则项参数选择
- 霸榜各大CV任务榜单，Swin Transformer横空出世！
- Windows10——荣耀笔记本任务栏图标显示异常且无显示/隐藏图标的箭头解决方案
- 1.Lambda表达式（新手写的！新手写的！新手写的！）（未完成）
- 七牛云存储：通过SDK上传图片
- Linux 定位网络不通问题
- Architecture：话说科学家/工程师/设计师/商人
- SQL Server死锁问题：事务(进程 ID x)与另一个进程被死锁在 锁 | 通信缓冲区资源上并且已被选作死锁牺牲品。请重新运行该事务。...
- 笔记本本地连接显示电缆拔出_没有安全电缆槽的笔记本电脑如何固定？
- python3 最基本且简单的实现组合设计模式
- java中的values函数_巧用valueat函数(快逸免费版)
- 误打误撞的模板字符串
- 《大话设计模式》读书笔记-建造者模式
- 涌之势，智造未来， 戴尔科技集团携新一代信息技术解决方案赋能“新基建”
- (2021) 18 [代码讲解] 可执行文件
- 16秋川大计算机基础作业,川大 16秋 《计算机应用基础》第一次作业答案
- Oracle DBA 经典面试题