我的插件整理

在日常工作中会用到很多的插件,他们极大的方便了我们的日常开发,可以快速的使我们实现一些漂亮的效果,现在把在工作中经常用到的插件进行整理

滑动swiper

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

滑动插件可以说是最经常用到的插件之一了,常见的滑动效果可以说都可以用这个插件做出来,因为swiper的使用场景太过于广泛,目前我只能列出我遇到过的场景;当然你也可以点击这里查看swiper基本效果,基本主流的滑动效果都可以在这里找到,其他的非主流效果就要见招拆招了(oﾟ▽ﾟ)o (笑)

swiper目前有swiper3,swiper4两个版本,两者api都可以在官网找到,两个版本在某些地方做出了变化,但是其基本使用都是实例化swiper的时候传入id以及可选参数构成; 这里使用版本为swiper4
发生变化的地方
;
可以看到变化的地方不多,主要是自动播放,分页器,回调函数发生了变化,下面通过一些项目中遇到的地方简单讲解一下,
在讲解之前首先先看一下swiper4 使用说明,对这个东西的使用有个大概认识;

其中有几个东西比较重要:
1,callback 回调函数,一般是滑动结束前后触发的函数
2,properties 整个swiper对象所有的属性
3,methods 在外部对swiper做的操作
4,slides grid 对swiper-slide 的布局设置
5,scroll-bar 对滚动滑块的设置
你要对这个swiper做什么操作从这三个里面去找一定可以找到对应的东西,下面开始介绍我遇到的使用场景

使用场景一 外部控制切换

这种使用场景很常见,主要就是里面两张图片既可以手指左右滑动切换,也可以借由上面两个按钮点击切换;
图片切换的时候上面的按钮也会跟着切换激活样式;
html结构以及代码

其实结构不必完全照这个来,你爱怎么写怎么写,这东西跟结构没有太大关系;
实例化js代码

//注意了,这是swiper3的写法
var skillSwiper = new Swiper('.skill-model-swiper', { //实例化滑动对象
    pagination : '.swiper-pagination-skill', //分页指示器
    onSlideChangeEnd: function(swiper) { //滑动结束获取当前激活序号,传入的swiper为当前的swiper对象,注意看上面的那张对比图的回调函数,这是一个区别
        var curidx = swiper.activeIndex; //activeIndex关键属性,当前swiper激活元素的序号,在api的属性里面去找
        $('.skill-lenli-btn button').eq(curidx)
        .addClass('skill-lenli-btn-act').parent()
        .siblings().find('button').removeClass('skill-lenli-btn-act');
    }
});

//看好了,这是swiper4的写法
var skillSwiper=new Swiper('.skill-model-swiper',{
    pagination: {
        el: '.swiper-pagination-skill'
    },
    on:{ //swiper4新增绑定方法,跟jquery的on性质差不多,用来添加回调函数或者事件句柄
        slideChangeTransitionEnd:function(){ //此方法和上面的onSlideChangeEnd作用一样,另外请注意这里并没有传入任何参数
            var curidex=this.activeIndex;//看到这个this了嘛,她就代指这个swiper对象,是不是和上面图片的写法一样了?
            $('.skill-lenli-btn button').eq(curidx).addClass('skill-lenli-btn-act')
            .parent().siblings().find('button').removeClass('skill-lenli-btn-act');
            }
        }
    })

上面的例子介绍了一个使用场景以及swiper3和4的一些区别,下面看第二个使用场景

使用场景二 tab切换, swiper显示隐藏, 滑动卡顿

这种使用是这是tab切换加上swiper,其实这种使用和一般的没什么区别,只是在一个区域有多个swiper存在,并且伴随tab标签切换,在切换显示隐藏的时候回出现一些意想不到的情况,就我遇到情况是只有第一个滑动正常,在我点击切换到后面swiper的时候,就会出现滑动不顺畅,以及滑不回去的情况(当然,这是我遇到的情况,有可能你会遇到其他的诡异情景);总之就是你通过一些外界操作影响了swiper内部的一些状态就可能会出现这些异常,这时候你需要监视器(查看文档 observer)来帮助了

observer
启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新
observeParents
将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

html结构以及代码

实例化js代码

$('.ds-sw>div').click(function(event) {
     var i = $(this).index();
     $(this).addClass('ds-sw-act').siblings().removeClass('ds-sw-act');
     $('.ds-person-item').eq(i).addClass('ds-person-item-act').siblings().removeClass('ds-person-item-act')
});
//这种3和4版本就没什么太大区别了,就pagination写法不一样而已
var dsItemSwiperA = new Swiper('.ds-person-swiper-a', {
    observer: true,
    observeParents: true,
    pagination : {
        el:'.dsItemSwiperASw'
    }
})

使用场景3 多图, 间隔, slide grid

这也是很常见的一种使用方法,在屏幕上显示一张主图,同时漏出上一张和下一张预览效果,在没有pagination分页器的情况下对于用户来说是一种很友好的提示方式
使用不难,关键在于css上

html结构以及代码

实例化js代码以及css部分

//css
.swiper-slide{
    width:296px;//最关键的一句,给每个swiper-silde给上宽度,
}
var dnrSwiper=new Swiper('.swiper-container-dinner',{
    slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量(carousel模式)。可以手动设定,但是我个人不推荐手动设定,给auto就好,尤其是这种类似场景下
    centeredSlides: true,//默认fasle,设定激活slide的水平位置,即靠左;这个一般设定true,即位于swiper-wrapper中间
    spaceBetween: 10,//设置每一个swiper-slide的左右边距,单位px
    /*autoplay : true,不推荐直接这么写*/
    autoplay:{
        delay:3000,
        disableOnInteraction: false,//当用户操作swiper时候,是否停止自动轮播,默认为true,如果你直接写autoplay:true,那么这个值就是默认true,也就是当用户手动滑动或者点击了swiper之后,自动轮播将不再生效
        stopOnLastSlide:fasle//自动轮播到最后一个是否停止滑动,默认值为false;
    }
})

使用场景4 多图, 间隔, slide grid, scrollbar进度条

这种场景是滚动条的应用,在官方提供的demo里面有类似的;

这图有两个地方,第一个是第一个加载时候并不是贴边,也不是完全居中,第二个就是下面滚动条了
使用这种滚动条就不在指定pagination,而是使用scrollbar
html结构以及代码

css以及js代码

//css
.swiper-b{
    margin-top: 20px;
    height: 150px; //注意这个高度,swiper容器默认高度是里面swiper-slide的高度的,在下面有分页器的时候需要手动设定,分页器或者滚动条的位置默认是相对swiper-container距离底部3px;所以滚动条会和swiper-slide重合,所以你需要手动增大容器的高度,当然,这是根据设计图来说的;
}
.swiper-slide-b{
    width: 137px;
    height: 124px;
    background-color: pink;
    line-height: 124px;
    text-align: center;
    font-size: 16px;
}
.swiper-container-horizontal > .swiper-scrollbar{
    width: 95%; //手动更改滚动条的宽度
    transform: translateX(-50%); //居中显示滚动条
    left: 50%;
}
//js
var swiperB=new Swiper('.swiper-b',{
    slidesPerView: "auto",
    spaceBetween: 15,
    slidesOffsetBefore : 10,//设定slide与左边框的预设偏移量（单位px）,这个实现不贴边效果
    slidesOffsetAfter : 10,//设定slide与右边框的预设偏移量（单位px）
    scrollbar: {
        el: '.swiper-scrollbar', //指定滚动
        dragSize: 30,//手动设定滑块的宽度,默认为'auto',他会自己算出来一个合适宽度,一般不需要设定
        draggable:true//设定是否可以手动拖动滚动滑块,默认为false不允许拖动
    },
});

使用场景5 双向控制,带3d的切换效果

;
这是起点3.3新版会员特权的介绍页详情页,两个难点,第一个介绍swiper的3d切换效果,第二个下面的介绍和上面的控制按钮是双向控制的;
首先第一个问题,3d切换效果,这个效果在swiper里面叫做coverflow,在api的特效选项里面,常用配置以及每个配置项是什么意思在介绍里面都有,待会儿上代码;
第二个问题,双向控制;这个在基础实例上也有案例,照着来也没问题,在api介绍里面的双向控制(controller)里面,有两种写法,一中是按照他的写法,在实例化swiper的时候写明control属性,谁控制谁,第二种写法是他这个control属性提出去,使用对象的方法

但是在使用过程中遇到两个问题,第一个是双向控制,上方swiper滑动方向和下方swiper的方向是相反的,但是我也没在control属性里面加上inverse(反向,这个属性在control里面也有介绍)属性,后面在修改发现,引起这个问题的原因是那个coverEffect的参数引起的,但是问题出现的原因暂时未知;
然后是第二个问题,上面的swiper里面11个slider,下面的也是,但是下面的一次只能显示一张,所以他可以滑动10次,但是上面的一次可以显示3个,所以只能滑动9次,因为在最后一次滑动就显示到了第9,10,11个,所以这时候就出现了异常问题;解决办法就是在第一个swiper上加上centeredSlides: true,属性;

最后js代码

var topSiwper=new Swiper(document.querySelector('.top-swiper-container'),{
    slidesPerView: 'auto',
    slideToClickedSlide: true,//一个可以不用让你手动写slideTo()的有用属性
    centeredSlides: true,//加上这个虽然感觉和设计图有些不一样,但是决绝了两边滑动相反的问题
});
/*下面的轮播组件*/
var centerSwiper=new Swiper(document.querySelector('.center-swiper-conatiner'),{
    slidesPerView: 'auto',
    effect:'coverflow',
    centeredSlides: true,
    spaceBetween:30,
    coverflowEffect: { //这个参数是调整到一个既有3d纵深效果,又解决了两边swiper滑动相反的问题
        rotate: 0 ,// 旋转的角度
        stretch: 0,// 拉伸   图片间左右的间距和密集度
        depth: 60,// 深度   切换图片间上下的间距和密集度
        modifier: 2,// 修正值 该值越大前面的效果越明显
        slideShadows : false// 页面阴影效果
    }
})
//双向控制
centerSwiper.controller.control=topSiwper;
topSiwper.controller.control=centerSwiper;

之前使用官方demo不行是因为版本问题,目前最新是在4.5.0+;下载最新版的就可以解决这个问题;

双向控制的进化版本

除了在要求两个swiper能够双向控制之外,还有一个需求就是预览的swiper点击当前一个还要自动向前移动一个slide的位置;这个在之前的加薪活动中有过,在照片集中又有应用

<style>
    #thumbs .swiper-slide{
        width: 1.8rem;
        height: 1.5rem;
        font-size: .24rem;
    }
    #thumbs .swiper-slide>div{
        width: 1.5rem;
        height: 100%;
        background-color: white;
        transition: all .25s linear;
        text-align: left;
        margin: 0 auto;
    }
</style>

<div class="swiper-container b" id="gallery"> <!--这个是内容swiper--> </div>
<div class="swiper-container t" id="thumbs" > <!--这个是预览swiper--> </div>

jQuery(document).ready(function($) {
    //导航swiper
    var galleryThumbs = new Swiper('#thumbs', {
        slidesPerView: 'auto',
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        on:{
            init:function(){
                //导航字数需要统一,每个导航宽度一致
                navSlideWidth = this.slides.eq(0).css('width');
                clientWidth = parseInt(this.$wrapperEl.css('width')); //Nav的可视宽度
                navWidth = 0;
                for (i = 0; i < this.slides.length; i++) {
                    navWidth += parseInt(this.slides.eq(i).css('width'))
                }
            },
        }
    });

    //内容swiper
    var galleryTop = new Swiper('#gallery', {
        spaceBetween: 10,
        centeredSlides : true,
        slidesPerView: 'auto',
        on:{
            transitionStart:function(){
                activeIndex = this.activeIndex
                $(galleryThumbs.slides[activeIndex]).addClass('swiper-slide-active-custom').siblings().removeClass('swiper-slide-active-custom')
                //activeSlide距左边的距离
                navActiveSlideLeft = galleryThumbs.slides[activeIndex].offsetLeft
                galleryThumbs.setTransition(300)
                if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                    galleryThumbs.setTranslate(0)
                } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                    galleryThumbs.setTranslate(clientWidth - navWidth)
                } else {
                    galleryThumbs.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
                }
            }
        }
    });
    //绑定导航点击切换
    galleryThumbs.on('tap',function(e){
        clickIndex = this.clickedIndex
        clickSlide = this.slides.eq(clickIndex);
        $(clickSlide).addClass('swiper-slide-active-custom').siblings().removeClass('swiper-slide-active-custom')
        galleryTop.slideTo(clickIndex, 0);
    })
});

以上做法就可以满足要求,但是存在一个问题,这个东西对于预览swiper的布局有一些要求,在预览swiper,或者swiper-slide里面不能有间距,不管是css 写上去的margin或者是padding,还是js 设定的spaceBetween;这个都会导致计算错误(滑稽,别问我为什么);所以,遇到这种情况你可以用个折中的办法,把swiper-slide 弄宽一点儿,里面的内容用个div包一下,然后外层使用居中之类的办法处理

swiper-slide切换内部元素带动画

也是比较常见的点,达到这种效果需要借助swiper.animate.js,这个东西一般都在swiper的压缩包里面,没有的话自行下载一个;
使用方法:

<div class="swiper-slide swiper-out-slide swiper-no-swiping">
    <div class="animated ani swiper-out-slide-left">
        <img src="../jpg/b6.jpg" width="400" height="400" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
    </div>
    <div class="swiper-out-slide-right ani " swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
        <h2>百度3</h2>
        <div><strong>纵里寻他千百度,默认回首,却在灯火阑珊处</strong></div>
        <div>百度百度百度百度百度百度百度百度百度</div>
    </div>
</div>

var swiperOut=new Swiper(document.querySelector('.swiper-out'),{
    effect : 'fade',//之所以使用这种效果是因为默认的slide效果感觉搭配动画会有点儿奇怪,当然,或许默认的slide效果搭配其他的animated动画会很不错
    on:{
        init: function(){
            swiperAnimateCache(this); //隐藏动画元素
            swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd:function(){
            swiperAnimate(this);
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次，去除ani类名;ps:这一句很奇怪,如果放开这句话,那么每一张swiper-slide都不会消失的,会全部堆在页面上;
        }
    }
});

使用很简单,只需要在需要动画的元素上加上'ani' class,这是她内部提供的class,所以不能更改,然后你在加上swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" 这些属性就好了,动画时间自由更改,动画类型也是自由更改;

制作匀速滚动效果,例如文字循环跑马灯

这个效果多用在一些列表文字展示,例如抽奖展示,在网上找到的基本都是3版本,其实跟4版本也差不多
html结构跟一般的结构没区别
实现这个效果主要是更改一点儿css效果,你可以把这段代码复制到你的css里面或者页面上;

.swiper-container-free-mode>.swiper-wrapper{
    transition-timing-function: linear; //之前是ease-in-out;
    -moz-transition-timing-function: linear; /* Firefox 4 */
    -webkit-transition-timing-function: linear; /* Safari 和 Chrome */
    -o-transition-timing-function: linear; /* Opera */
    margin: 0 auto;
}

js代码

var slideSwiper=new Swiper('.slidetext-swiper',{
    freeMode:true,//匀速滚动需要配合这个参数
    speed:3000, //这个参数主要配置配置滚动速度,默认的话滚得会很快,3s还不错
    autoplay:{
        delay: 0, //无延迟
    },
    loop:true, //,避免文字滚完了回滚看起来很蠢,这里注意,虽然官方文档说loop模式遇到freemode会引起抖动,但是在貌似并没有发现这种问题,可能是因为文字太小,间隔也小的原因看起来不明显吧;
    direction : 'vertical',
    noSwiping : true,
    slidesPerView:3,
})

滑动插件(better-scroll.js)

请注意很重要的一点,请务必小心
scroll实例化时候的选择器问题,一定要保证唯一性 也就说加入你是用的是jquery的class选择器,比如class为wrap 那么一定要使用$('.wrap')[0]来确保唯一性;或者你可以使用原生选择器方法 document.querySelector(selectors[, NSResolver]);
scroll滑动区域如果碰上了display:none; 那么极有可能会出现实例化了但是无法滚动的情况,因为display:none 的元素在页面上是没有宽高属性,只会得到0或者其他的什么稀奇古怪的值,所以插件只会拿到完全错误的宽高数据,那么就无法正确实例化, 实在不行你可以先把滚动区域的opacity设置为0,让插件至少拿到正确的宽高属性进行实例化,实例化完了在display:none;

最佳解决办法
使用他内置的refresh()方法,用这个方法你就可以不用设定样式了,什么透明度,zinde之类的,你只需要在点击显示遮罩的时候手动refresh()就好了

var bsw=cbs(); //创建bs 实例
$('.showbs').click(function(event) { //点击显示bs 弹窗
$('.option-mask').show();
bsw.refresh(); //手动刷新,强制计算bs实例
});

隐藏的时候什么都不用管,普通hide()就好

请注意内容的包裹元素和外层父元素的高度关系 实例化的那个dom元素的高度一定是固定的,而且必须小于内容的直系包裹元素,只有这样才能产生滚动落差,有时候你很容易实例化错误的dom对象;然后内容的直系包裹元素你不能有高度属性,他的高度就是里面内容高度;

多说一句,关于上面的display:none, 至少目前遇到2个问题是因为他引起的,一个是作品集那个pdf切换时候,第一个iframe默认显示,所以正确的显示了,但是第二个默认隐藏,当时就是写的display:none 后果就是导致他们的框架在计算的时候对第一张pdf加上了width:0; height:0; 这么一个该死的样式,结果搞了很久时间才解决;好在最后他们改版修复了这个bug;
第二个问题就是上面发现的那个better-scroll插件因为display:none 导致无法正确实例化的问题了

一个很好用的滑动插件,以下简称bs插件,通过模拟body滑动来克服ios 上uiwebview(比如手机QQ)等局部滑动异常的问题;
当元素内部高度大于包裹元素的时候就产生了滚动,滚动分为常规body滚动和局部滚动,body滚动底层由浏览器内核控制,不会受到太多影响;局部滚动相对麻烦,在ios上会产生许多问题;
直接介绍better-scorll使用方法,先放出使用说明better-scroll参数以及方法

使用bs插件要求dom结构一定简单,通常是一层包裹最佳,所有内容放在内层包裹里面

<div class="wrapper"> //请注意检查这东西和.content的高度,加入划不动你可以看看他们的css
  <div class="content">
    content...
  </div>
</div>

<script>
    var wrapper=$('#wrapper);
    var myScroll=new BScroll(wrapper,{ //直接实例化就好,参数可根据实际情况或查看使用说明添加
        HWCompositing:true,
        useTransition:false,  // 防止iphone微信滑动卡顿
        probeType: 3,
        click:true,
        wheel:false,
        snap:false,
    });
</script>

jquery.parallax.js 视差引擎

一款轻巧强大的视差引擎插件,可以做出背景元素跟随鼠标反向移动的炫酷效果,使用也很简单

<div id="container" class="container">
    <ul id="scene" class="scene">
        <li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
        <li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
        <li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
        <li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
        <li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
        <li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
    </ul>
</div>

js部分:

<script src="../deploy/jquery.parallax.js"></script>
$('#scene').parallax();

注意:元素上的 layer 类是一定不能丢掉的;data-depth决定景深,它还可以单独分开x,y方向写
<li class="layer" data-depth-x="-0.60" data-depth-y="-0.20"><img src="images/layer3.png"></li>
<li class="layer" data-depth="0.40" data-depth-y="-0.30"><img src="images/layer4.png"></li>

倒计时插件(countDown.js)

这是一个简单又实用的插件,直接拖出来一个倒计时效果,活动开始之前会自动提示敬请期待,结束之后显示活动结束
html结构

<div class="pmcount_down" style="color:#999;font-size:14px;">
    <em>剩余:</em>
    <span class="day_num">00</span>
    <span class="hour_num">00</span>:
    <span class="min_num">00</span>:
    <span class="sec_num">00</span>
</div>

js代码

$(".pmcount_down").countDown({
    startTimeStr: '2018/07/18 10:00:00', //开始时间
    endTimeStr: '2018/09/20 10:10:00', //结束时间
    daySelector:'.day_num',
    hourSelector: ".hour_num",
    minSelector: ".min_num",
    secSelector: ".sec_num"
});

注意
1, 当页面有多个定时器存在的时候,不要马虎全部复制粘贴,一定要注意每一个定时器里面pmcount_down,daySelector,hourSelector,minSelector,secSelector这几个class不能重复,要不然会实例化到同一个地方去,导致每一个倒计时得到一样的倒计时长,如果你看到几个倒计时是一样的倒计时长,那么看看是不是class重复了
2, 在ios里面要注意起始时间的格式,在pc,安卓时间戳可能是2018/07/18 10:00:00这个格式,但是在ios里面是2018-07-18 10:00:00;如果你的倒计时在pc上或是安卓上正常,但是到了ios上无法工作,那么就看看是不是这个时间格式问题

瀑布流加上图片加载(masonry.js+imagesloaded.js)

使用之前首先应该载入jquery,imagesloaded用于图片较多的时候方便masonry计算;两个插件加起来可以做一个漂亮的瀑布流,附上插件的使用参数设置 https://segmentfault.com/a/1190000007316788
一个简单的使用插件的起点后台demo

html结构以及css

.masonry {
    .item{
        float: left;
        position:relative;
        width:300px; //每一个item都限制宽度,这是一种等宽瀑布流,并没能实现等高的效果
        margin-bottom: 8px;
        &:hover .pic-info{ 
            bottom:4px; opacity: 1; 
        }
        img{
            width:100%; 
            max-width:100%;
            height:auto;//其实在后台的这个demo里面是做了溢出隐藏的,
        }
    }
}
//dom结构尽量简洁
<div class="masonry" id="masonry">
    <div class="item">
        <i class="delete">×</i>
        <img src="http://img2.imgtn.bdimg.com/it/u=3221513737,2348674445&fm=200&gp=0.jpg" alt="">
    </div>
    <div class="item">
        <i class="delete">×</i>
        <img src="http://img2.imgtn.bdimg.com/it/u=3221513737,2348674445&fm=200&gp=0.jpg" alt="">
    </div>
</div>

js部分

$(function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() { //这是imagesload.js提供的方法,链接说明也有关于他的说明
        $container.masonry({ //详细参数或者了解每一个参数的作用就查看上面的链接说明
            itemSelector: '.item',
            gutter: 15,
            isAnimated: true,
        });
    });
    
    $('.delete').click(function(event) {
        $container.masonry( 'remove', $(this).parent());//插件的事件,更多事件同样查看上面连接说明
        $container.masonry() //当容器内部发生了dom变化之后,建议都运行一次这个方法,让容器重新计算一次内部尺寸
    });
});

等高瀑布流

上面介绍的是一种等宽瀑布流,下面介绍一种等高瀑布流jquery.xgallerify,当然最好也配合上面的imagesloaded.js;

<div id="xgallerify" class="xgallerify photos">
    <div class="photo" style="display: inline-block; margin: 10px; width: 424.82px;">
        <img src="https://static.qidianla.com/qidian_modelbanner201911_20191120193147_6974.png">
    </div>
    ....省略一万个
</div>

js:

<script src="../assets/plug/pubuliu/imagesloaded.js"></script>
<script src="../assets/plug/pubuliu/jquery.xgallerify.min.js"></script>
$(function() {
    var $container = $('#xgallerify');
    $container.imagesLoaded(function() {
        $container.gallerify({
            mode: 'small',
            lastRow: 'adjust',
            debounceLoad: true,
        });
    });
});

参数	默认值	类型	描述
margin	10	int	各个图片之间的margin值
width	800	int	图片画廊的宽度，单位像素
model	default, bootstrap, flickr 或 small	string	模式参数用于决定该图片画廊如何显示，以及每行显示多少张图片
lastRow	adjust 或 fullwidth	string	设置最后一行为全屏宽度或自动调整（建议使用自动调整）
jsSetup	布尔	布尔	设置元素的默认CSS样式。
debounceLoad	布尔	布尔	该参数会在渲染新的图片之前等待100毫秒，用于提高性能

拖拽插件(jquery.dad.js)

一个简单又实用的拖拽插件,可用于拖动排序
简单demo以及参数使用说明 拖拽插件使用说明
如果使用局部拖拽,那么拖拽的元素不能有visibity,至少目前他会影响拖拽...
一个官方例子

<div class="demo">
    <div class="item item1"><span>1</span></div>
    <div class="item item2"><span>2</span></div>
    <div class="item item3"><span>3</span></div>
    <div class="item item4"><span>4</span></div>
    <div class="item item5"><span>5</span></div>
</div>

$(function(){ 
    $('.demo').dad();
});

滚动页面触发CSS 动画效果插件 (WOW.js)

(ps:这肯定是一位魔兽玩家写的插件,s（【pic】乛◡乛【pic】）)

如标题所见,这是用在滑动页面时候用来触发css动画的插件,像很多官网上滚动鼠标到一定距离之后就出发了元素上的渐入动画之类的;所以一般这个插件是需要搭配animated.css 使用的,使用起来也很方便
一个简单例子:

<link rel="stylesheet" type="text/css" href="../js/animate.min.css">
<script src="../js/wow.min.js"></script>

<div style="display:flex;justify-content:space-between;width:1200px;margin:50px auto">
    <div class="wow fadeInLeft testblock" data-wow-duration="1.5s" data-wow-delay="0.3"></div>
    <div class="wow fadeInUp testblock" data-wow-duration="1.5s" data-wow-delay="0.3"></div>
    <div class="wow fadeInDown testblock" data-wow-duration="1.5s" data-wow-delay="0.3"></div>
    <div class="wow fadeInRight testblock" data-wow-duration="1.5s" data-wow-delay="0.3"></div>
</div>

实例化:

var wow = new WOW({
    boxClass: 'wow', //
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

属性/方法	类型	默认值	说明
boxClass	string	wow	wow需要执行动画的元素的 class, 与标签上的class 对应
animateClass	string	animated	animated.css 提供的指定动画class
offset	num	0	距离可视区域多少开始执行动画
mobile	bool	true	移动设备上是否执行动画
live	bool	true	异步加载进来的元素是否应用动画

其实配置的话一般来说就这样就可以的了,你只需要在你想要的使用动画的元素上加上指定class就好了,其中 'wow' 代表这个元素需要使用wow记录位置使用wow插件功能,然后fadeInUp 这些就是animated.css 提供的预置效果,想要使用那些效果直接替换class就好,data-wow-duration是指动画持续时间,可以自由调整,data-wow-delay是指动画延迟多长时间执行