国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號(hào)

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

        當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > 純手工打造漂亮的瀑布流Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox

        純手工打造漂亮的瀑布流Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox

        時(shí)間:2016-06-14來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1368次

        FineUI控件庫(kù)發(fā)展至今已經(jīng)有 5 個(gè)年頭,目前論壇注冊(cè)的QQ會(huì)員 5000 多人,捐贈(zèng)用戶(hù) 500 多人(捐贈(zèng)用戶(hù)轉(zhuǎn)化率達(dá)到10%以上,在國(guó)內(nèi)開(kāi)源領(lǐng)域相信這是一個(gè)夢(mèng)幻數(shù)字!也足以證明FineUI旺盛的生命力?。?。在這 5 年七年,F(xiàn)ineUI總共發(fā)布了 100 多個(gè)版本!也積攢了大量的典型案例。

        然而一直以來(lái),F(xiàn)ineUI的典型案例都是在論壇上以帖子的形式進(jìn)行展示,沒(méi)有一個(gè)集中展示的地方。今天我們就使用前段時(shí)間比較流行的瀑布流來(lái)解決FineUI典型案例的展示問(wèn)題。最終的顯示效果如下圖所示。

        143400yenp1wduyjnujexh

         

        五大插件簡(jiǎn)介

        為了制作FineUI的《典型案例》頁(yè)面,我們綜合運(yùn)用了Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox五大插件,下面先對(duì)這 5 個(gè)插件進(jìn)行簡(jiǎn)單的介紹。

        1. Bootstrap:強(qiáng)大的CSS框架,由Twitter的開(kāi)發(fā)工程師推出,不僅僅是960布局,而且包含很多很多拿來(lái)就用的漂亮樣式。從Bootstrap推出第一個(gè)版本作者就開(kāi)始使用,http://twitter.github.io/bootstrap/

        2. jQuery:JavaScript框架,業(yè)界事實(shí)的標(biāo)準(zhǔn)。http://jquery.com/

        3. Masonry:制作瀑布流布局的JavaScript庫(kù)。http://masonry.desandro.com/

        4. imagesLoad:監(jiān)測(cè)圖片是否加載完畢的JavaScript庫(kù)。https://github.com/desandro/imagesloaded

        5. Lightbox:以彈框形式集中展示圖片的JavaScript庫(kù)。http://lokeshdhakar.com/projects/lightbox2/

         

        用Bootstrap打底

        首先為每個(gè)案例準(zhǔn)備1-2張截圖、案例名稱(chēng)以及案例作者,并創(chuàng)建簡(jiǎn)單的HTML布局如下:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        <div id="masonry" class="container-fluid">
         
            <div class="thumbnail">
                <div class="imgs">
                    <img src="./images/2426.png" />
                </div>
                <div class="caption">
                    <div class="title">簡(jiǎn)單OA管理系統(tǒng)</div>
                    <div class="content">
                        
                    </div>
                    <div class="author">
                        by <a target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=2426">小小生</a>
                    </div>
                </div>
            </div>
            
        </div>

          

         

        為HTML元素定義簡(jiǎn)單的CSS樣式:

        <style>
            #masonry
            {
                padding: 0;
                min-height: 450px;
                margin: 0 auto;
            }
            #masonry .thumbnail
            {
                width: 330px;
                margin: 20px;
                padding: 0;
                border-width: 1px;
                -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
                        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            }
            #masonry .thumbnail .imgs
            {
                padding: 10px;
            }
            #masonry .thumbnail .imgs img
            {
                margin-bottom: 5px;
            }
            #masonry .thumbnail .caption
            {
                background-color: #fff;
                padding-top: 0;
                font-size: 13px;
            }
            #masonry .thumbnail .caption .title
            {
                font-size: 13px;
                font-weight: bold;
                margin: 5px 0;
                text-align: left;
            }
            #masonry .thumbnail .caption .author
            {
                font-size: 11px;
                text-align: right;
            }
            
        </style>

          

         

        此時(shí)的頁(yè)面看起來(lái)如下圖所示(源代碼在 index_1.html 中,文章最后會(huì)提供下載地址)。

        image

         

        用Masonry+imagesLoaded創(chuàng)建瀑布流

        由于列表中包含圖片,我們需要所有圖片加載完畢后再調(diào)用Masonry的瀑布流布局,從而方式列表中的元素重疊在一起。為上述頁(yè)面添加如下簡(jiǎn)單的JavaScript代碼。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        <script>
            $(function() {
            
                var masonryNode = $('#masonry');
                masonryNode.imagesLoaded(function(){
                    masonryNode.masonry({
                        itemSelector: '.thumbnail',
                        isFitWidth: true
                    });
                });
                
                
            });
        </script>

          

         

         

        此時(shí)頁(yè)面顯示效果如下圖所示(源代碼在 index_2.html 中,文章最后會(huì)提供下載地址)。

        image

         

        手工創(chuàng)建隨機(jī)序列和延遲加載效果

        如果圖省事,上面就已經(jīng)完成了全部的工作,頁(yè)面已經(jīng)創(chuàng)建出來(lái)了,瀑布流效果看起來(lái)還不錯(cuò)。不過(guò)程序員一定要精益求精,我們還要認(rèn)真考慮如下兩個(gè)問(wèn)題:

        1. 目前有35個(gè)案例,每個(gè)案例有1-2張圖片,要等這80幾張圖片全部加載完畢再生成瀑布流,需要的時(shí)間會(huì)很長(zhǎng);

        2. 由于這些案例都是平級(jí)的,我們不能手工引入順序,所以需要隨機(jī)顯示。

         

        針對(duì)第一個(gè)問(wèn)題,Masonry幸好有相應(yīng)的 appended 方法,來(lái)在現(xiàn)有的瀑布流布局基礎(chǔ)上添加新的元素,而不會(huì)影響已經(jīng)存在的布局,其調(diào)用方法如下所示。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        // 首先將新元素添加到頁(yè)面容器中
         
        masonryNode.append(newItems);
        // 等待新元素中的圖片加載完畢
        newItems.imagesLoaded(function(){
         
        // 調(diào)用瀑布流布局的appended方法
            masonryNode.masonry('appended',  newItems);
        });

          

         

        那么在什么時(shí)間調(diào)用呢?上一篇文章《純手工打造漂亮的垂直時(shí)間軸,使用最簡(jiǎn)單的HTML+CSS+JQUERY完成100個(gè)版本更新記錄的華麗轉(zhuǎn)身!》已經(jīng)給出了相應(yīng)的代碼,在頁(yè)面的滾動(dòng)條滾動(dòng)到頁(yè)面底部時(shí)加入新的元素。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        $(window).scroll(function() {
                        
            if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {
                
                if(!imagesLoading) {
                    appendToMasonry();
                }
                
            }
            
        });

          

         

        針對(duì)第二個(gè)問(wèn)題,我們需要首先在頁(yè)面上放置所有的案例并隱藏,然后通過(guò)JavaScript進(jìn)行隨機(jī)排序后,添加到頁(yè)面中。隨機(jī)排序使用了JavaScript數(shù)組的sort方法,如下所示。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        var ghostNode = $('#masonry_ghost').find('.thumbnail'), i, ghostIndexArray = [];
        var ghostCount = ghostNode.length;
        for(i=0; i<ghostCount; i++){
            ghostIndexArray[i] = i;
        }
        ghostIndexArray.sort(function(a, b) {
            if(Math.random() > 0.5) {
                return a - b;
            } else {
                return b - a;
            }
        });

          

         

        JavaScript數(shù)組的sort方法接受一個(gè)函數(shù),在函數(shù)內(nèi)部決定兩個(gè)需要比較對(duì)象的大小,我么使用Math.random來(lái)生成一個(gè)0-1的隨機(jī)數(shù)來(lái)和0.5比較,從而使得兩個(gè)需要比較的對(duì)象大小也是隨機(jī)的。

         

        注:特別需要注意,由于隱藏在DIV中的圖片還是會(huì)在頁(yè)面打開(kāi)時(shí)加載,我們需要先將 img 標(biāo)簽改為 input[type=hidden] 標(biāo)簽,并在需要的時(shí)候還原成 img 標(biāo)簽。也即是將 <img src="./images/2426.png" /> 替換為 <input type="hidden" value="2426.png"> 。

         

        此時(shí)頁(yè)面顯示效果如下圖所示(源代碼在 index_3.html 中,文章最后會(huì)提供下載地址)。

        image

         

        注意,此時(shí)頁(yè)面中典型案例的順序已經(jīng)是隨機(jī)的了,并且當(dāng)頁(yè)面滾動(dòng)條靠近底部時(shí)會(huì)自動(dòng)加載剩余的列表。

         

        Lightbox為頁(yè)面增色

        由于瀑布流展示的圖片比較小,最后我們還需要Lightbox為頁(yè)面增色,調(diào)用代碼非常簡(jiǎn)單,只需要修改 img 標(biāo)簽即可。

        <img src="./images/1408.png">

        修改為:

        <a href="./images/large/1408.png" data-lightbox="lightbox_" title="Enterprise Solution  (by James)"><img src="./images/1408.png"></a>

          

         

        注:Lightbox和Bootstrap有點(diǎn)沖突,導(dǎo)致Lightbox不能正常顯示彈出框中的圖片,我們還需要在CSS中加入如下代碼。

        1
        2
        3
        4
        5
        .lightbox .lb-image
        {
            max-width: none;
        }

          

        使用Lightbox后的效果(源代碼在 index.html 中,文章最后會(huì)提供下載地址)。

        180151vnxa4rx7g4nb9ebc

        此時(shí),我們已經(jīng)可以在全部的圖片(是大圖哦)中導(dǎo)航,效果很贊!

         

        最終效果

        快來(lái)體驗(yàn)一把: http://fineui.com/case/

         

        全部源代碼下載

        下載地址: http://fineui.com/bbs/forum.php?mod=viewthread&tid=3606

         

        小結(jié)

        仔細(xì)想想,現(xiàn)在的Web前端工程師已經(jīng)非常幸福了,你看IE6已死,IE7/8也蹦彈不了幾天,還有那么多優(yōu)秀的CSS、JavaScript框架供我們使用。而大部分時(shí)候我們的也沒(méi)必要從頭做起(做學(xué)習(xí)研究除外),站在巨人的肩膀上,省時(shí)省工,而且效果更好!

        熱門(mén)關(guān)鍵詞: 瀑布流 Bootstrap jQuery Masonry i

        您可能感興趣的相關(guān)文章:

        欄目列表
        推薦內(nèi)容
        熱點(diǎn)內(nèi)容
        展開(kāi)