文章彙整

快速完成瀑布流版面-使用Masonry套件

By Astral Web 1 year agoNo Comments
首頁  /  網站設計與開發  /  快速完成瀑布流版面-使用Masonry套件

masonry

今天我們來實作如何使用Masonry製作瀑布流的效果,這裡因為是強調瀑布流效果,範例所採用的圖片就不先講究美感了喔! 各位有需要可以換成自己想要的圖片。

 

首先在<head>中掛載:

 

jquery:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


Masonry:

<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

 


接著,在<body>中加入以下:

<div class="grid">

<div class="grid-item">

    <img src="http://lorempicsum.com/rio/350/200/1" alt="">

   </div>

<div class="grid-item  grid-item--height2">

    <img src="http://lorempicsum.com/rio/350/300/2" alt="">     

    </div>

  <div class="grid-item grid-item--height3">

    <img src="http://lorempicsum.com/rio/627/300/3" alt="">

</div>

  <div class="grid-item">

    <img src="http://lorempicsum.com/rio/350/200/4" alt="">

</div>

  <div class="grid-item">

    <img src="http://lorempicsum.com/rio/350/200/5" alt="">

</div>

  <div class="grid-item">

    <img src="http://lorempicsum.com/rio/627/300/6" alt="">

</div>

  <div class="grid-item grid-item--height2">

    <img src="http://lorempicsum.com/rio/627/300/7" alt="">

</div>

</div>

 


再來加入css定義外觀:

* { box-sizing: border-box; }


.grid:after {

content: ' ';

display: block;

clear: both;

}


/* ---- grid-item ---- */


.grid-item {

 width: 320px;

  height: 320px;

 float: left;

 border: 2px solid #333;

 border-radius: 5px;

 overflow:hidden

}


.grid-item--height2 { height: 460px; }

.grid-item--height3 { height: 520px; }


Img{

height: 100%

}


最後在<script>中,利用masonry 的最基本的效果吧!

$('.grid').masonry({

 itemSelector: '.grid-item',

  columnWidth: 320

});

完成了! 打開瀏覽器看看效果吧!!

 

小說明:

在<script>中的$(‘.grid’)即是最外面容器的範圍, itemSelector則是容器內的每一個小元件,而 columnWidth則表示列寬(建議設置)。

另外還有很多效果,例如加入’gutter:10′ 表示 每一列中間的距離是10、加入’horizontalOrder: true’表示即使螢幕寬變化,依舊會照原來編輯的順序排列 itemSelector…….等等,可以在masonry官網上 查看!

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。