UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

瀑布流无限加载图片插件jq-waterfall

所属分类：UI-布局

 83859  462  查看评论 (46)
分享到微信朋友圈
X
瀑布流无限加载图片插件jq-waterfall ie兼容6
 查看演示  立即下载

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 nullajax回调函数，有2个可用参数：success, end



相关插件-布局
查看更多

jQuery响应式商城网页模板

 jQuery响应式商城网页模板，包含多种风格，模块页全。
  布局
 35781  427

jQuery创意工作室网站模板

 jQuery bootstrap 响应式创意工作室模板
  布局
 53446  751

黑色系带动画的汽车官网首页模板

 该页面运用了animate，fontawesome，fullPage，owl.carousel等开源插件制作而成
  布局
 40411  375

bootstarp响应式模版

 bootstarp响应式模版
  布局
 34543  481

讨论这个项目（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
        是啊我也很乱，加载下一页的时候很乱，再加载下一页的时候上一页的才能加载出样式恢复正常
    回复
    在地球上旅行的独角兽 ζ 0
    2018/5/11 17:21:56
    怎么重新调用waterfall 回复
    南笙姑娘 0
    2018/5/8 10:59:55
    为什么滚动加载每次都会回到顶部，一闪一闪的 回复
    我不等风来?? 0
    2018/4/17 16:49:02
    各位 大神 请帮忙解决下 我这个为什么 报错: $(#demo).waterfall is not a functionat 回复
    cC林淇 1
    2018/3/27 15:34:31

    第二行开始的left是按屏幕外框来写的不科学，应该

    $(this).css("left", $item.eq(minIndex).offset().left - ($(window).width() - $item.parents().width()) / 2);

    获取当前的外框宽度，屏幕宽度，减去外框度除二，再去被当前图片位置的offset减掉
    这样子外面加框限制就不会错乱了

    回复
    * C 0
    2018/3/2 16:29:59
    信达互联制作一部-朱桂宁 1
    2017/12/20 15:47:23

    关于这个插件中设置宽度之后错位的问题各位把调整positionAll里面的offset()改成position()之后就可以了

        放开那只长颈鹿!0
        2019/1/23 14:22:52
        很感谢 改了以后能用了
        远航0
        2019/3/7 17:12:49
        修改以后第一次加载还是错乱，请问你的可以吗
    回复
    Lex Luthor 0
    2017/11/27 16:19:16

    作为一个过来人奉劝一句，小心使用

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复