瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）
瀑布流布局，听起来听牛逼的样子，其实就是简单的子元素筛选功能。不过这一功能在网站页面布局当中还是很常用的，特别是在电商网站中
经常会有点一个钮筛选，然后页面的子元素刷的以下变了样。接下来，我们先简单介绍下概念和用法，然后详解这一功能的实现。
瀑布流概念：
又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为多栏布局，附带筛选功能，当下在国内十分流行。
瀑布流原理：
通过为子元素定义不同的class类名，然后通过类名及其内容进行筛选排序。
这一插件在实现网站元素动态切换，调整整体顺序方面十分实用。但是帅选的功能只能由程序员设置，用户无法自定义设置。
接下来我们看一段代码，及效果演示，具体了解插件的用法（代码可直接黏贴运行，但是需要下载对应js文件）
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isotope-jQuery神奇的分类过滤和排序插件</title>
</head>
<body>
<div class="htmleaf-container"> <h2>以下是筛选功能</h2> <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">显示所有</button>
<button class="button" data-filter=".metal">金属</button>
<button class="button" data-filter=".transition">过渡元素</button>
<button class="button" data-filter=".alkali, .alkaline-earth">碱及碱金属</button>
<button class="button" data-filter=":not(.transition)">过渡元素</button>
<button class="button" data-filter=".metal:not(.transition)">非碱金属</button>
<button class="button" data-filter="numberGreaterThan50">序号小于50</button>
<button class="button" data-filter="ium">名字以ium结尾</button>
</div> <h2>以下是重新排序功能</h2>
<div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">默认顺序</button>
<button class="button" data-sort-by="name">名字排序</button>
<button class="button" data-sort-by="symbol">符号</button>
<button class="button" data-sort-by="number">数字</button>
<button class="button" data-sort-by="weight">质量</button>
<button class="button" data-sort-by="category">种类</button>
</div> <div class="isotope">
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Mercury</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Tellurium</h3>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Bismuth</h3>
<p class="symbol">Bi</p>
<p class="number">83</p>
<p class="weight">208.980</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Lead</h3>
<p class="symbol">Pb</p>
<p class="number">82</p>
<p class="weight">207.2</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Gold</h3>
<p class="symbol">Au</p>
<p class="number">79</p>
<p class="weight">196.967</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h3 class="name">Potassium</h3>
<p class="symbol">K</p>
<p class="number">19</p>
<p class="weight">39.0983</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h3 class="name">Sodium</h3>
<p class="symbol">Na</p>
<p class="number">11</p>
<p class="weight">22.99</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Cadmium</h3>
<p class="symbol">Cd</p>
<p class="number">48</p>
<p class="weight">112.411</p>
</div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h3 class="name">Calcium</h3>
<p class="symbol">Ca</p>
<p class="number">20</p>
<p class="weight">40.078</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Rhenium</h3>
<p class="symbol">Re</p>
<p class="number">75</p>
<p class="weight">186.207</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Thallium</h3>
<p class="symbol">Tl</p>
<p class="number">81</p>
<p class="weight">204.383</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Antimony</h3>
<p class="symbol">Sb</p>
<p class="number">51</p>
<p class="weight">121.76</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Cobalt</h3>
<p class="symbol">Co</p>
<p class="number">27</p>
<p class="weight">58.933</p>
</div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h3 class="name">Ytterbium</h3>
<p class="symbol">Yb</p>
<p class="number">70</p>
<p class="weight">173.054</p>
</div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h3 class="name">Argon</h3>
<p class="symbol">Ar</p>
<p class="number">18</p>
<p class="weight">39.948</p>
</div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h3 class="name">Nitrogen</h3>
<p class="symbol">N</p>
<p class="number">7</p>
<p class="weight">14.007</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h3 class="name">Uranium</h3>
<p class="symbol">U</p>
<p class="number">92</p>
<p class="weight">238.029</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h3 class="name">Plutonium</h3>
<p class="symbol">Pu</p>
<p class="number">94</p>
<p class="weight">(244)</p>
</div>
</div>
</div> <script src='js/jquery-1.10.2.js'>
</script><script src='js/isotope.pkgd.min.js'></script>
<script>
$(function () {
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function (itemElem) {
var weight = $(itemElem).find('.weight').text();
return parseFloat(weight.replace(/[\(\)]/g, ''));
}
}
});
var filterFns = {
numberGreaterThan50: function () {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
$('#filters').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
filterValue = filterFns[filterValue] || filterValue;
$container.isotope({ filter: filterValue });
});
$('#sorts').on('click', 'button', function () {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
});
</script>
</body>
</html>
然后看一下效果图：
接下爱来咱们说说插件的使用，以下代码时进行子元素筛选的，直接设置 data-filter 的值就可以了，这相当于是说你创建了一个类别，二者
个类别中的元素，只要他们具备 class 有这个类别的名字就可以了，当你点击对应按钮时，子元素就会自动变化筛选。
<div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">显示所有</button>
<button class="button" data-filter=".metal">金属</button>
<button class="button" data-filter=".transition">过渡元素</button>
<button class="button" data-filter=".alkali, .alkaline-earth">碱及碱金属</button>
<button class="button" data-filter=":not(.transition)">过渡元素</button>
<button class="button" data-filter=".metal:not(.transition)">非碱金属</button>
<button class="button" data-filter="numberGreaterThan50">序号小于50</button>
<button class="button" data-filter="ium">名字以ium结尾</button>
</div>
而下述代码是实现子元素排序功能的，用 data-sort-by 定义好你要按什么规则筛选，这个插件自带了 name 按首字母
ascill值排序，number 按数值大小排序等。也可以自定义排序的方式，在js中修改即可。
<div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">默认顺序</button>
<button class="button" data-sort-by="name">名字排序</button>
<button class="button" data-sort-by="symbol">符号</button>
<button class="button" data-sort-by="number">数字</button>
<button class="button" data-sort-by="weight">质量</button>
<button class="button" data-sort-by="category">种类</button>
</div>
子元素中，用大div将整个子元素内容包裹起来，根据类名与 data-sort-by 的对应关系，实现筛选。data-category="transition"也是
筛选用的，因为有时一个子元素同时会有2个下海选的类名，这个属性是为他设置一个最为优先的类别，避免冲突。
而子元素当中众多的p标签啥的，都不是关键，关键看class类名，是什么标签无所谓，只要有与上述代码对应的类名，就可以根据对应标签
里的text内容进行排序
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Mercury</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
而js代码可以直接黏贴这段自执行函数，就可以实现想要的功能。
对于此插件的js文档请到我个人主页的文件中下载。
瀑布流布局使用详解——JQuery插件Isotope（动态实现子项目筛选）的更多相关文章
- 详解jquery插件中(function ( $, window, document, undefined )的作用。
1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...
- $.ajax()方法详解 jquery
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- 腾讯技术分享：GIF动图技术详解及手机QQ动态表情压缩技术实践
本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...
- JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
随机推荐
- JavaWeb之cookie
什么叫做会话 ? 用户从打开一个浏览器开始,浏览器网站,到关闭浏览器的整个过程叫做一次会话! 每个用户与服务器进行交互的过程中,各自会有一些数据,程序要想办法保存每个用户的数据. 例如:用户点击超链接 ...
- 03 Types of Learning
学习的分类: 根据输出空间Y:分类(二分类.多分类).回归.结构化(监督学习+输出空间有结构): 根据标签y:监督学习.无监督学习(聚类.密度估计.异常点检测).半监督学习(标注成本高时).强化学习: ...
- 浅谈如何让 Bootstrap 3兼容IE8浏览器
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...
- 怎样配置mysql_installer_community_V5.6........_setup的数据库？
直接访问查看如下路径就可以根据方法匹配 http://jingyan.baidu.com/album/c35dbcb0f1b1448916fcbcc7.html
- 浅析Thread类run()和start()的区别
1.先看看jdk文档 void run() If this thread was constructed using a separate Runnable run object, then that ...
- vue-router2 使用
VUE-ROUTER2 API http://router.vuejs.org/zh-cn/api/router-link.html 1,安装vue-router npm install vue ...
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
- C#小知识点记录（QQ交流群的一个小问题）Linq提取数据
请教 这里 LINQ想 找到 最后的 4条 记录 然后放在 这里这个 List Linq查找怎么写呀? 解答:写了一个小例子作为解答. namespace C_Sharp { class Progra ...
- PTA自测-3 数组元素循环右移问题
自测-3 数组元素循环右移问题 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M≥0)个位置,即将A中的数据由(A0A1···AN-1)变换为 ...
- JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同
在JQuery中,我们可以利用mousedown.mouseup来跟踪页面的鼠标按下与释放事件. 如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位 ...