原创jquery瀑布流插件兼容ie8+
所属分类:视觉UI  创作类型:原创  作者:呆猫  发布时间:2018-06-04 12:48:07
789 26
本站所有插件都是基于jquery或php的,不依赖其他任何框架,可以集成到大部分网站上。如果有问题可以联系技术
QQ:635081743 微信:wangbin676243
Chrome Firefox Safari IE8+
描述:这是一款基于jquer的瀑布流插件,简单易用,示例中提供了无限瀑布流和点击瀑布流,至于分页获取数据等业务需要自行处理。

引用方式

第一步

加载必要的js

<script src="jquery-1.9.1.js"></script>
<script src="./yanWaterFall/yanWaterFall.min.js"></script>

第二步

设置html结构

<div class="waterFall">
    <div class="box"><img src="http://www.yanphp.com/statics/demo/001.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/002.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/003.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/004.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/005.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/006.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/007.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/008.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/009.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/010.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/011.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/012.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/013.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/014.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/015.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/016.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/017.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/018.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/019.jpg"></div>
    <div class="box"><img src="http://www.yanphp.com/statics/demo/020.jpg"></div>
</div>

第三步

js调用

<script>
    $('.demo .waterFall').yanWaterFall({
         complete:function (instance) {
             $('.demo  button').click(function () {
                 loadMore();
             });
             function loadMore() {
                 $.ajax({
                     url:'./index.php',
                     success:function (resp) {
                         for(var i = 0;i<resp.length;i++)
                         {
                             instance.addItem($('<div class="box"><img src="'+resp[i].img+'"></div>'))
                         }
                         instance.allImageLoaded(function () {
                             instance.render();
                         })
                     }
                 })
             }

         }
    });

</script>

插件参数说明

columns栏数
gutter排水沟宽度
complete页面初始化完成的回调,我们可以利用这个参数处理一些业务逻辑
相关插件
图片采集图片展示jquery插

这个一款jquery图片展示原创插件,可以用来展示图集,非常适合...

简单弹框查看图片的jquery

这是一款图片弹窗查看插件,只要简单的设置一个yanImageShow c...

jquery+php图片上传通用插

这是一款基于jquery+php的图片上传插件,可以用在头像,封面上...

功能强大且兼容ie8的jquer

这是一款jquery弹框插件,兼容ie8,非常好用,摒弃了iframe的...

共有0条评论