快速完成瀑布流版面-使用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官網上 查看！
我要留言