Masonry 是用來製作瀑布流版型的套件
基本使用方法
HTML
1 | <!-- .box 長寬請自行設定 --> |
2 | <div id="container"> |
3 | <div class="box"></div> |
4 | <div class="box"></div> |
5 | <div class="box"></div> |
6 | <div class="box"></div> |
7 | <div class="box"></div> |
8 | <div class="box"></div> |
9 | <div class="box"></div> |
10 | <div class="box"></div> |
11 | </div> |
Javascript
1 | $('#container').masonry({ |
2 | //選擇item |
3 | itemSelector: '.box' |
4 | }); |
如果有讀入圖片，可以使用imagesLoaded的plugin
1 | $('#container').imagesLoaded( function(){ |
2 | $('#container').masonry({ |
3 | itemSelector: '.box' |
4 | }); |
5 | }); |
更多細部設定可以參考官方文件