Isotope.js 超好看前端响应式JS插件 动态实现瀑布流布局排版、筛选、排序等功能
2019-01-10
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
官网地址: https://isotope.metafizzy.co/
项目中的效果: https://chrome.zzzmh.cn/
入门用法
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
评论区空空如也,赶紧添加一条评论吧
评论 {{counts.commentCount}}
![](/public/img/anonymous.jpg)
{{comment.name}}
{{comment.os}}
{{comment.browser}}
![](/public/img/author.jpg)
{{comment.reply.name}}
{{comment.reply.os}}
{{comment.reply.browser}}
![zzzmh](/public/img/author.jpg)