插件描述：jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。
jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。该瀑布流特效使用ajax调用来动态加载图片，达到无限加载的效果。它使用简单，兼容性好，值得推荐！
使用方法
使用这个瀑布流插件需要引入jQuery和jquery.waterfall.js文件。
<script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.waterfall.js"></script>
HTML结构
该瀑布流特效的HTML结个使用一个<div>来包裹图片，然后在外围使用一个<div>作为包裹容器。
<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中给出了这个瀑布流的基本样式，你可以自行修改为你需要的瀑布流样式。
#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来在页面向下滚动的时候对图片进行动态加载，以达到无限瀑布流的效果。
$("#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:
相关插件-布局
HTML5 Bootstrap创意设计类模板
html5 Bootstrap程序模板，非常适合自由职业者，创意人员，网页设计师和开发人员以优雅的方式展示他们的产品组合。此模板在页面之间具有平滑的过渡效果。
布局
讨论这个项目（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
2018/3/27 15:34:31
第二行开始的left是按屏幕外框来写的不科学，应该
$(this).css("left", $item.eq(minIndex).offset().left - ($(window).width() - $item.parents().width()) / 2);获取当前的外框宽度，屏幕宽度，减去外框度除二，再去被当前图片位置的offset减掉
这样子外面加框限制就不会错乱了
信达互联制作一部-朱桂宁 1
2017/12/20 15:47:23
关于这个插件中设置宽度之后错位的问题各位把调整positionAll里面的offset()改成position()之后就可以了
放开那只长颈鹿!0
2019/1/23 14:22:52
-
很感谢 改了以后能用了
远航0
2019/3/7 17:12:49
-
修改以后第一次加载还是错乱，请问你的可以吗
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
