用 jQuery Masonry 插件建立瀑布流式的頁面

瀑布流式的頁面，最先我是在國外的一個叫 Pinterest 的網站上看到，這個網站爆發，後來國內的不少網站也使用了這種瀑布流方式來展現頁面（我不太喜歡瀑布流這個名字）。

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

1，分別下載 jQuery 與 Masonry ，而後把他們都加載到頁面中使用。

下載 jQuery 架構：http://jquery.com
下載 Masonry 插件：http://masonry.desandro.com/
加載代碼：

1. <scriptsrc="http://ninghao.net/js/jquery-1.8.1.min.js"></script>
2. <scriptsrc="http://ninghao.net/js/jquery.masonry.min.js"></script>

解釋：很簡單，就是把下載以後的腳本文件嵌入到你想使用瀑布流形式的頁面中，注意文件的名稱與路徑，根據你本身的實際狀況修改。

2，頁面代碼

1. <divid="masonry"class="container-fluid">
2. <divclass="box"><imgsrc="http://ninghao.net/images/1.jpg"></div>
3. <divclass="box"><imgsrc="http://ninghao.net/images/2.jpg"></div>
4. <divclass="box"><imgsrc="http://ninghao.net/images/3.jpg"></div>
5. <divclass="box"><imgsrc="http://ninghao.net/images/4.jpg"></div>
6. <divclass="box"><imgsrc="http://ninghao.net/images/5.jpg"></div>
7. ...
8. </div>

解釋：把每一個小內容塊放在一個擁有相關類的容器裏，而後把全部的內容塊放在一個大的容器裏，這裏咱們把內容塊圖片放在一個擁有 .box 類的 <div> 標籤裏，而後把他們又使用帶有 #masonry ID 的 <div> 裏面，一下子咱們會用 #masonry ID 和 .box 類來觸發使用瀑布流。

3，樣式代碼

1. .container-fluid {
2. padding:20px;
3. }
4. .box {
5. margin-bottom:20px;
6. float: left;
7. width:220px;
8. }
9. .box img {
10. max-width:100%
11. }

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

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

1. <script>
2. $(function(){
3. var $container = $('#masonry');
4. $container.imagesLoaded(function(){
5. $container.masonry({
6. itemSelector :'.box',
7. gutterWidth :20,
8. isAnimated:true,
9. });
10. });
11. });
12. </script>

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

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

下載演示：http://joomlafans.org/uploads/FileUpload/a1/52baf077b2b11a0346822b8f7be9...

我知道這種展現內容的形式很流行，國內不少的大網站也在用，其實你可讓他變得更有意思一點，好比，不必定全部的內容塊的寬度都同樣。