jQuery.isotope
🌙
手机阅读
本文目录结构
插件 jQuery.isotope 中文 API 文档
Isotope
过滤和排序神奇的布局
有关完整的文档和演示，请参见 Isotope - filtering & sorting
安装
下载
CDN
Link directly to Isotope files on unpkg.
直接链接到 unpkg 上的 Isotope 文件。
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
npm 包安装
npm: npm install isotope-layout --save
Bower: bower install isotope-layout --save
License
商业牌照
如果要使用同位素开发商业站点，主题，项目和应用程序，则商业许可是适当的许可。使用此选项，您的源代码将保持专有。通过 isotope.metafizzy.co 购买同位素商业许可证
开源许可证
如果要在与GNU GPL许可证v3兼容的许可证下创建开源应用程序，则可以根据 GNU GPL license v3 的条款使用Isotope。
初始化
With jQuery
$('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
使用 JavaScript
// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
With HTML
Add a data-isotope attribute to your element. Options can be set in JSON in the value.
<div class="grid"
data-isotope='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
