個人插件整理

時間 2020-02-01

標籤個人插件整理简体版

原文原文鏈接

在平常工做中會用到不少的插件,他們極大的方便了咱們的平常開發,能夠快速的使咱們實現一些漂亮的效果,如今把在工做中常常用到的插件進行整理javascript

滑動swiper

Swiper經常使用於移動端網站的內容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

滑動插件能夠說是最常常用到的插件之一了,常見的滑動效果能夠說均可以用這個插件作出來,由於swiper的使用場景太過於普遍,目前我只能列出我遇到過的場景;固然你也能夠點擊這裏查看swiper基本效果,基本主流的滑動效果均可以在這裏找到,其餘的非主流效果就要見招拆招了(oﾟ▽ﾟ)o (笑)css

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

使用場景一外部控制切換

這種使用場景很常見,主要就是裏面兩張圖片既能夠手指左右滑動切換,也能夠藉由上面兩個按鈕點擊切換;
圖片切換的時候上面的按鈕也會跟着切換激活樣式;
html結構以及代碼

其實結構沒必要徹底照這個來,你愛怎麼寫怎麼寫,這東西跟結構沒有太大關係;
實例化js代碼java

//注意了,這是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的一些區別,下面看第二個使用場景jquery

使用場景二 tab切換, swiper顯示隱藏, 滑動卡頓

這種使用是這是tab切換加上swiper,其實這種使用和通常的沒什麼區別,只是在一個區域有多個swiper存在,而且伴隨tab標籤切換,在切換顯示隱藏的時候回出現一些意想不到的狀況,就我遇到狀況是隻有第一個滑動正常,在我點擊切換到後面swiper的時候,就會出現滑動不暢,以及滑不回去的狀況(固然,這是我遇到的狀況,有可能你會遇到其餘的詭異情景);總之就是你經過一些外界操做影響了swiper內部的一些狀態就可能會出現這些異常,這時候你須要監視器(查看文檔 observer)來幫助了ios

observer
啓動動態檢查器(OB/觀衆/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。
默認false，不開啓，可使用update()方法更新
observeParents
將observe應用於Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新。web

html結構以及代碼

實例化js代碼bootstrap

$('.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上segmentfault

html結構以及代碼

實例化js代碼以及css部分api

//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計算;兩個插件加起來能夠作一個漂亮的瀑布流,附上插件的使用參數設置 http://www.javashuo.com/article/p-puqkhwuz-hg.html
一個簡單的使用插件的起點後臺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是指動畫延遲多長時間執行