Isotope.js 前端响应式JS插件 动态实现瀑布流布局排版、筛选、排序等功能


官网地址: https://isotope.metafizzy.co/

博客地址: https://zzzmh.cn/single?id=56

在线项目效果: https://chrome.zzzmh.cn/


Isotope.js 前端响应式JS插件 动态实现瀑布流布局排版、筛选、排序等功能


入门用法

1、筛选过滤

(官网例子: https://isotope.metafizzy.co/filtering.html

html

<div id="grid">
  <div class="element-item transition metal"><p class="number">80</p></div>
  <div class="element-item post-transition metal"><p class="number">89</p></div>
  <div class="element-item alkali metal"><p class="number">30</p></div>
  <div class="element-item transition metal"><p class="number">55</p></div>
</div>


javascript

// 全部
$('#grid').isotope({ filter: '*' });
// class 中包含 transition
$('#grid').isotope({ filter: '.transition' });
// class 中包含 metal
$('#grid').isotope({ filter: '.metal' });

// jQuery 代码过滤
$('#grid').isotope({
  filter: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  }
})


在我的项目中的效果 : (在线地址: https://chrome.zzzmh.cn/)


2、排序

(官网例子 https://isotope.metafizzy.co/sorting.html

html

<div id="grid">
  <div class="element-item transition metal" data-category="transition">
    <p class="number">79</p>
    <h3 class="symbol">Au</h3>
    <h2 class="name">Gold</h2>
    <p class="weight">196.966569</p>
  </div>
  <div class="element-item metalloid" data-category="metalloid">
    <p class="number">51</p>
    <h3 class="symbol">Sb</h3>
    <h2 class="name">Antimony</h2>
    <p class="weight">121.76</p>
  </div>
  ...
</div>


javascript

// 目标div中的子元素里 class 为 name 的值
$('#grid').isotope({ sortBy: 'name' })
// 目标div中的子元素里 class 为 number 的值
$('#grid').isotope({ sortBy: 'number' })

// 进阶
$('#grid').isotope({
    // 定义data
    getSortData: {
        category: '[data-category]', // 指目标div中的attribute的值,例如前面html里的 data-category="metalloid"
        number: '.number' //目标div中的子元素里 class 为 number 的值
    },
    // 排序
    sortBy: number, // 按照某个data排序,也支持多个,写作 sortBy:[number, category],
    // 是否升序 true or false
    sortAscending: false
});


在我的项目中的效果 : (在线地址: https://chrome.zzzmh.cn/)


入门功能就是这些,进阶功能建议访问官网查看: https://isotope.metafizzy.co



送人玫瑰,手留余香
js/java 前后端BASE64加解密
Jsoup爬虫获取自己网站在百度搜索中的实时排名