• 0712-2888027 189-8648-0214
    微信公眾號

    孝感風信網絡科技有限公司微信公眾號

    當前位置:主頁 > 技術支持 > Javascript/JQuery > jQuery瀑布流插件 Masonry

    jQuery瀑布流插件 Masonry

    時間:2024-03-28來源:風信官網 點擊: 687次

    我們可以使用 jQuery 的 Masonry 插件來實現這種頁面形式,下面介紹一下方法。

    官方站點:http://masonry.desandro.com/

    演示地址:http://codepen.io/desandro/pen/vdkJn

    jQuery瀑布流插件 Masonry

    1,分別下載 jQuery 與 Masonry ,然后把他們都加載到頁面中使用。

    加載代碼:

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>

     

    解釋:很簡單,就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁面中,注意文件的名稱與路徑,根據你自己的實際情況修改。

     

    2,頁面代碼

    <div id="masonry" class="container-fluid">
      <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
      <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
      <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
      <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
      <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
      ...
    </div>

     

    解釋:把每個小內容塊放在一個擁有相關類的容器里,然后把所有的內容塊放在一個大的容 器里,這里我們把內容塊圖片放在一個擁有 .box 類的 <div> 標簽里,然后把他們又使用帶有 #masonry ID 的 <div> 里面,一會兒我們會用 #masonry ID 和 .box 類來觸發使用瀑布流。

     

    3,樣式代碼

    .container-fluid {
      padding: 20px;
      }
    .box {
      margin-bottom: 20px;
      float: left;
      width: 220px;
      }
      .box img {
      max-width: 100%
    }

    解釋:針對第二步的頁面代碼,我們需要添加一點樣式,.box 類我們添加了浮動屬性,還設置了他的寬度。

     

    4,在頁面中啟用瀑布流形式的腳本代碼

    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                    itemSelector: '.box',
                    gutter: 20,
                    isAnimated: true,
                });
         });
    });
    

    解釋:這里我們首先定位想使用瀑布流的大容器是什么,這里就是帶有 #masonry ID 的 <div> 標簽,在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內容塊容器上共同的類是什么,這里就是帶有 .box 類的 <div> 標簽,在itemSelector : '.box', 這行代碼中定義。

     

    gutter: 20, 這行代碼定義了內容塊之間的距離是 20 像素,isAnimated: true, 這行代碼可以打開動畫選項,也就是當改變窗口寬度的時候,每行顯示的內容塊的數量會有變化,這個變化會使用一種動畫效果。

     

    (感謝網友阿富)提供不居中顯示!

    我的一個笨方法:

    $(function() {
        var $objbox = $("#masonry");
        var gutter = 25;
        var centerFunc, $top0;
        $objbox.imagesLoaded(function() {
            $objbox.masonry({
                itemSelector: "#masonry > .box",
                gutter: gutter,
                isAnimated: true
            });
            centerFunc = function() {
                $top0 = $objbox.children("[style*='top: 0']");
                $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
            };
            centerFunc();
        });
        var tur = true;
        $(window).resize(function() {
            if (tur) {
                setTimeout(function() {
                    tur = true;
                    centerFunc();
                },
                1000);
                tur = false;
            }
        });
    });
    
    熱門關鍵詞: jQuery 瀑布流插件 Masonry
    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区