插件描述：jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。
jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。该瀑布流特效使用ajax调用来动态加载图片，达到无限加载的效果。它使用简单，兼容性好，值得推荐！
使用方法
使用这个瀑布流插件需要引入jQuery和jquery.waterfall.js文件。
1 2 | <script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.waterfall.js"></script> |
HTML结构
该瀑布流特效的HTML结个使用一个<div>来包裹图片，然后在外围使用一个<div>作为包裹容器。
1 2 3 4 5 6 | <div id="demo"> <div class="box"><img src="img/01.jpg" alt=""></div> <div class="box"><img src="img/02.jpg" alt=""></div> <div class="box"><img src="img/03.jpg" alt=""></div> ...</div> |
CSS样式
DEMO中给出了这个瀑布流的基本样式，你可以自行修改为你需要的瀑布流样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #demo { margin: auto; position: relative;} .box { float: left; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; box-shadow: 0 0 8px #ccc;} .box:hover { box-shadow: 0 0 10px #999; } .box img { width: 200px; } |
调用插件
插件使用Javascript来生成Pinterest样式的网格瀑布流布局。使用ajaxCallback来在页面向下滚动的时候对图片进行动态加载，以达到无限瀑布流的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $("#demo").waterfall({ itemClass: ".box", minColCount: 2, spacingHeight: 10, resizeable: true, ajaxCallback: function(success, end) { var data = {"data": [ { "src": "03.jpg" }, { "src": "04.jpg" }, { "src": "02.jpg" }, { "src": "05.jpg" }, { "src": "01.jpg" }, { "src": "06.jpg" } ]}; var str = ""; var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>' for(var i = 0; i < data.data.length; i++) { str += templ.replace("{{src}}", data.data[i].src); } $(str).appendTo($("#div1")); success(); end(); }}); |
配置参数
下面是该瀑布流特效的可用参数。
| 参数 | 默认值 | 描述 |
| itemClass | "waterfall-item" | 图片网格元素的class名称 |
| spacingWidth | 10 | 图片网格元素的水平间距 |
| spacingHeight | 10 | 图片网格元素的垂直间距 |
| minColCount | 2 | 瀑布流布局的最小列数 |
| resizeable | false | 是否在浏览器窗口缩放时触发positionAll()方法 |
| itemAlign | "center" | 图片网格元素的对齐方式，可选：center|left |
| isFadeIn | true | 是否在加载图片时使用淡入淡出效果 |
| ajaxCallback | null | ajax回调函数，有2个可用参数：success, end |
PREVIOUS:
NEXT:
相关插件-布局
紫色创意企业工作室Bootstrap模板
Mogh是一个精美的HTML模板设计，适合数码机构商业、金融、企业网站。您可以使用这个美丽的改造成你需要的模板。模板是基于Bootstrap程序设计，这模板将100%的流体响应任何设备。我们已经测试了这个在iMacMacbook ProiPhoneiPad和三星S9。此外您将得到18+独特的HTML文件。
布局
jQuery bootstrap响应式网站模板
jQuery bootstrap响应式网站模板，风格简洁适用范围广，它配备了谷歌地图,滑动轮播图,平滑的滚动动画。使用最新的Web 开发工具(如 HTML5、CSS3 和 jQuery)构建。
布局
讨论这个项目（46）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
Become_Ape 0
2018/10/23 16:18:47
-
第一次加载 如果我data中放的图片超过了minColCount的数量 后面的图片重叠了咋办 如果继续下拉就好了，不过首次加载 不友好
ps、随心所欲0
2019/5/22 10:03:44
-
给图片都加上初始高度
忆往 0
2018/8/2 15:32:05
-
刚开始加载图片还是乱的，只有滚动后执行一次waterfall函数图片排版才能正常，这是怎么回事啊？
指尖上的青春0
2019/2/14 9:41:56
-
你好 请问这个问题你解决了吗
神仙0
2020/12/9 15:58:28
-
同求
神仙0
2020/12/9 15:58:44
-
你好 请问这个问题你解决了吗
Ryn 0
2018/8/1 16:14:58
-
引入计算发生错误，位置很乱
??0
2021/7/17 11:17:23
-
是啊我也很乱，加载下一页的时候很乱，再加载下一页的时候上一页的才能加载出样式恢复正常
cC林淇 评论奖励 1 jQ币
2018/3/27 15:34:31
第二行开始的left是按屏幕外框来写的不科学，应该
1 | $(this).css("left", $item.eq(minIndex).offset().left - ($(window).width() - $item.parents().width()) / 2); |
获取当前的外框宽度，屏幕宽度，减去外框度除二，再去被当前图片位置的offset减掉
这样子外面加框限制就不会错乱了
信达互联制作一部-朱桂宁 评论奖励 1 jQ币
2017/12/20 15:47:23
关于这个插件中设置宽度之后错位的问题各位把调整positionAll里面的offset()改成position()之后就可以了
放开那只长颈鹿!0
2019/1/23 14:22:52
-
很感谢 改了以后能用了
远航0
2019/3/7 17:12:49
-
修改以后第一次加载还是错乱，请问你的可以吗
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
