阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录