jQuery Masonry

最新推荐文章于 2024-08-27 15:49:16 发布

转载最新推荐文章于 2024-08-27 15:49:16 发布 · 809 阅读

文章标签：

#jQuery #waterfall

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery Masonry插件创建瀑布流布局，并演示图片加载处理及动效增强技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webdesign060-02

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

　　今天來教大家怎麼自己做瀑布流不局的網頁，先給大家看一下完成的樣子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.
    }