網頁設計

關於網頁設計的技術或相關資訊分享

waterfall-design

網頁版面設計 - Waterfall 瀑布流布局教學

webdesign060-02

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

今天來教大家怎麼自己做瀑布流布局的網頁,先給大家看一下完成的樣子: jquery Masonrt Demo

使用套件

使用方法

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

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

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

2.html的結構如下

<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>

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

3.CSS的部分設定

.item {
width: 220px;
margin: 10px;
float: left;
}

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

4.javascript設定

$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});

這樣就會有基本的樣子了,看Masonrt Demo 1

展示圖片

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

<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240
});
});
});
</script>

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

使用動畫效果

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

jquery方式

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

<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true,
columnWidth : 240
});
});
});
</script>

Masonrt Demo 3

CSS transitions方式

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

.masonry,
.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}

Masonrt Demo 4

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

Masonrt Demo 5

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

Please enable the javascript to submit this form