[十分鐘學習] Masonry – 自動排序Layout

 Masonry常用於優化垂直可用位置來放置物件，你在網路上經常看到他

GitHub Star: 12,000
Javascripting Overall: 78%
瀏覽器: Chrome、Firefox和IE10+
RWD: 支援
License: MIT

《安裝》
CDN

<!– Masonry v4.2.0 –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js

“></script>
npm

$ npm install masonry-layout –save
Bower

$ bower install masonry-layout –save
《範例》
自動排版

<!–
參數設定[註1]
itemSelector: 網格類別名稱
columnWidth: 網格寬度
–>
<div class=”grid” data-masonry='{ “itemSelector”: “.grid-item”, “columnWidth”: 240 }’>
<div class=”grid-item”><!– 內容 –></div>
<div class=”grid-item”><!– 內容 –></div>
…
</div>
<style>
.grid-item {
width: 240px; <!– 自訂寬度 –>
height: 180px; <!– 自訂高度 –>
}
</style>
[註1]

參數 描述
itemSelector 網格類別名稱
columnWidth 網格寬度
《延伸》
Masonry
desandro/masonry: Cascading grid layout library