海南苯概企业管理有限公司

我們可以使用 jQuery 的 Masonry 插件來實現(xiàn)這種頁面形式，下面介紹一下方法。

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

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

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>

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

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>

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

3,樣式代碼

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

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

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

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

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

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

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

我的一個笨方法：

$(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;
        }
    });
});