最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP下载 admin 868浏览 0评论
 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

转载请注明:XAMPP中文组官网 » [十分鐘學習] Masonry – 自動排序Layout

您必须 登录 才能发表评论!