久久久久精品国产,丰满少妇粗大猛烈进高清播放,久久久97,在线18禁

<wbr id="x3zex"><nav id="x3zex"><em id="x3zex"></em></nav></wbr>

        <s id="x3zex"></s>
        1. <ruby id="x3zex"><nav id="x3zex"><acronym id="x3zex"></acronym></nav></ruby>
          <font id="x3zex"><noscript id="x3zex"></noscript></font>
          0712-2888027 189-8648-0214
          微信公眾號(hào)

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

          當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > jQuery瀑布流插件 Masonry

          jQuery瀑布流插件 Masonry

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

          我們可以使用 jQuery 的 Masonry 插件來(lái)實(shí)現(xiàn)這種頁(yè)面形式,下面介紹一下方法。

          官方站點(diǎn):http://masonry.desandro.com/

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

          jQuery瀑布流插件 Masonry

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

          加載代碼:

          <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>

           

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

           

          2,頁(yè)面代碼

          <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>

           

          解釋:把每個(gè)小內(nèi)容塊放在一個(gè)擁有相關(guān)類的容器里,然后把所有的內(nèi)容塊放在一個(gè)大的容 器里,這里我們把內(nèi)容塊圖片放在一個(gè)擁有 .box 類的 <div> 標(biāo)簽里,然后把他們又使用帶有 #masonry ID 的 <div> 里面,一會(huì)兒我們會(huì)用 #masonry ID 和 .box 類來(lái)觸發(fā)使用瀑布流。

           

          3,樣式代碼

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

          解釋:針對(duì)第二步的頁(yè)面代碼,我們需要添加一點(diǎn)樣式,.box 類我們添加了浮動(dòng)屬性,還設(shè)置了他的寬度。

           

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

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

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

           

          gutter: 20, 這行代碼定義了內(nèi)容塊之間的距離是 20 像素,isAnimated: true, 這行代碼可以打開(kāi)動(dòng)畫(huà)選項(xiàng),也就是當(dāng)改變窗口寬度的時(shí)候,每行顯示的內(nèi)容塊的數(shù)量會(huì)有變化,這個(gè)變化會(huì)使用一種動(dòng)畫(huà)效果。

           

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

          我的一個(gè)笨方法:

          $(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;
                  }
              });
          });
          
          熱門關(guān)鍵詞: jQuery 瀑布流插件 Masonry

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

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