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

2019-01-10 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}

入门用法

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
});