isotope README

The project's README from github.com/metafizzy/isotope. As one markdown file: README.md.

Isotope

Filter & sort magical layouts

See isotope.metafizzy.co for complete docs and demos.

Install

Download

CDN

Link directly to Isotope files on unpkg.

<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>

Package managers

npm: npm install isotope-layout --save

Bower: bower install isotope-layout --save

License

Commercial license

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an Isotope Commercial License at isotope.metafizzy.co

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3.

Read more about Isotope's license.

Initialize

With jQuery

$('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

With vanilla 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>

By Metafizzy 🌈🐻, 2010–2020

isotope (metafizzy/isotope)

Searching Database…

11.1K ·GitHub
Isotope
这是干什么的？Isotope 是一个用于实现“神奇布局”的 JavaScript 库：它能对网页上的元素进行筛选和排序，并以动画效果把它们移动到新位置。
它是 jQuery 插件，还是独立的库？它是一个前端 JavaScript 库，不是独立的应用：把 isotope.pkgd.js 脚本引入到你的页面，然后把它应用到你想要筛选和排序的元素上即可。
怎么把它加到项目里？运行 npm install isotope-layout（也可以用 Bower），从 unpkg CDN 引入文件，或者下载 isotope.pkgd.js 并在页面中引入。完整的文档和示例在 isotope.metafizzy.co 上。
用它必须装 jQuery 吗？不需要。jQuery 只是三种方式之一：你还可以用原生 JavaScript 初始化 Isotope，或者纯靠 HTML，通过添加 data-isotope 属性并以 JSON 形式写入配置项来使用，所以 jQuery 完全是可选的。
在商业项目里可以免费用吗？不能直接免费用。商业网站、主题和应用需要购买 Isotope Commercial License；免费使用仅适用于采用 GPLv3 兼容许可证的开源项目。
它是不是绑定瀑布流（masonry）式网格的？masonry-layout 包本身就是一个依赖项，所以瀑布流式的排布功能是自带捆好一起的；README 里也把它的核心功能定位为对布局元素进行筛选和排序。
有用于生产环境的压缩版吗？有：未压缩的 isotope.pkgd.js 旁边就提供压缩版 isotope.pkgd.min.js，两者也都能从 unpkg CDN 获取。
What are similar projects?masonry, muuri, velocity, chosen, jquery, toastr, scrollreveal, material
Which topics is it in?grid, layout, jquery, javascript-library, animation, browser, html, ui, gplv3, web-development, npm, frontend
Creator
metafizzy
Size
1.7 MB
Stars
11.1K
Updated
CommitApr 14Releasev3.0.5Apr 06
Age
15y
Commits · 90 Days