jQuery Masonry

　　前陣子看到非常有趣的Waterfall瀑布流布局，可以先看一下有使用的網站如下。

• Pinterest：http://pinterest.com
• Wookmark：http://www.wookmark.com/
• 花瓣网：http://huaban.com/

　　今天來教大家怎麼自己做瀑布流不局的網頁，先給大家看一下完成的樣子Masonry DEMO

 使用套件

• 名稱：jQuery Masonry
• 網站：http://masonry.desandro.com/

使用方法 

1.首先要先載入需要的js

1. <script src="/js/jquery.min.js"></script>

2. <script src="/js/jquery.masonry.min.js"></script>

　　這邊的jquery需要的版本為1.4.0或者更新版本

2.html的結構如下

1. <div id="container">

2. <div class="item">...</div>

3. <div class="item">...</div>

4. <div class="item">...</div>

5. ...

6. </div>

　　把一格一格要顯示的內容用class 為item的div包起來

3.CSS的部分設定

1. .item {

2. width: 220px;

3. margin: 10px;

4. float: left;

5. }

　　把每個item的寬度設定為一致，才有辦法排的漂亮，不然會有空隙，加一點margin讓每個item有點間隔，另外把float屬性設定為left。

4.javascript設定

1. $(function(){

2. $('#container').masonry({

3. // options

4. itemSelector : '.item',

5. columnWidth : 240

6. });

7. });

　　這樣就會有基本的樣子了，看DEMO1。

 

展示圖片

　　如果在item中展示圖片的話，由於javascript開始執行的時候，圖片還沒有載入完全，導致高度上會錯亂，因此需要在javascript的地方使用imagesLoaded()來防止高度錯誤，讓網頁正確顯示，方法如下

01. <script>

02. $(function(){

03. var $container = $('#container');

04. $container.imagesLoaded(function(){

05. $container.masonry({

06. itemSelector : '.item',

07. columnWidth : 240

08. });

09. });

10. });

11. </script>

　　這樣的話就可以在item中使用圖片，不會讓高度的計算上錯誤了。看DEMO2

使用動畫效果

　　剛剛的DEMO2中，當在縮放視窗的時候，每個item都是直接跳到新的位置，讓我們來幫他加點動畫效果，讓整個頁面看起來效果更好，要使用動畫效果有兩個方法

1.jquery方式：

在javascript中加上動畫效果參數， isAnimated: true, 這樣就可以了

01. <script>

02. $(function(){

03. var $container = $('#container');

04. $container.imagesLoaded(function(){

05. $container.masonry({

06. itemSelector : '.item',

07. isAnimated: true,

08. columnWidth : 240

09. });

10. });

11. });

12. </script>

按我看DEMO3

2.CSS transitions方式：

　　使用之前提到的css 3效果，在CSS的部分加入以下CSS即可，優點是效果較好，缺點是某些瀏覽器到目前為止還是沒有辦法支援，例如IE9876....

01. .masonry,

02. .masonry .masonry-brick {

03. -webkit-transition-duration: 0.7s;

04. -moz-transition-duration: 0.7s;

05. -o-transition-duration: 0.7s;

06. transition-duration: 0.7s;

07. }

08. .masonry {

09. -webkit-transition-property: height, width;

10. -moz-transition-property: height, width;

11. -o-transition-property: height, width;

12. transition-property: height, width;

13. }

14. .masonry .masonry-brick {

15. -webkit-transition-property: left, right, top;

16. -moz-transition-property: left, right, top;

17. -o-transition-property: left, right, top;

18. transition-property: left, right, top;

19. }

DEMO4

　　最後可以在自己發揮一下美化一下就可以得到如下的效果

DEMO5

 

其他的參數還請大家自己到官網看囉。