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>

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang