1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

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

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

      jQuery瀑布流插件 Masonry

      時間:2024-07-10來源:風信官網 點擊: 806次

      我們可以使用 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
      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片