瀑布流布局使用详解——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">序号小于50button>
<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">Mercuryh3>
<p class="symbol">Hgp>
<p class="number">80p>
<p class="weight">200.59p>
div>
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Telluriumh3>
<p class="symbol">Tep>
<p class="number">52p>
<p class="weight">127.6p>
div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Bismuthh3>
<p class="symbol">Bip>
<p class="number">83p>
<p class="weight">208.980p>
div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Leadh3>
<p class="symbol">Pbp>
<p class="number">82p>
<p class="weight">207.2p>
div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Goldh3>
<p class="symbol">Aup>
<p class="number">79p>
<p class="weight">196.967p>
div>
<div class="element-item alkali metal " data-category="alkali">
<h3 class="name">Potassiumh3>
<p class="symbol">Kp>
<p class="number">19p>
<p class="weight">39.0983p>
div>
<div class="element-item alkali metal " data-category="alkali">
<h3 class="name">Sodiumh3>
<p class="symbol">Nap>
<p class="number">11p>
<p class="weight">22.99p>
div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Cadmiumh3>
<p class="symbol">Cdp>
<p class="number">48p>
<p class="weight">112.411p>
div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h3 class="name">Calciumh3>
<p class="symbol">Cap>
<p class="number">20p>
<p class="weight">40.078p>
div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Rheniumh3>
<p class="symbol">Rep>
<p class="number">75p>
<p class="weight">186.207p>
div>
<div class="element-item post-transition metal " data-category="post-transition">
<h3 class="name">Thalliumh3>
<p class="symbol">Tlp>
<p class="number">81p>
<p class="weight">204.383p>
div>
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Antimonyh3>
<p class="symbol">Sbp>
<p class="number">51p>
<p class="weight">121.76p>
div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Cobalth3>
<p class="symbol">Cop>
<p class="number">27p>
<p class="weight">58.933p>
div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h3 class="name">Ytterbiumh3>
<p class="symbol">Ybp>
<p class="number">70p>
<p class="weight">173.054p>
div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h3 class="name">Argonh3>
<p class="symbol">Arp>
<p class="number">18p>
<p class="weight">39.948p>
div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h3 class="name">Nitrogenh3>
<p class="symbol">Np>
<p class="number">7p>
<p class="weight">14.007p>
div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h3 class="name">Uraniumh3>
<p class="symbol">Up>
<p class="number">92p>
<p class="weight">238.029p>
div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h3 class="name">Plutoniumh3>
<p class="symbol">Pup>
<p class="number">94p>
<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">序号小于50button> <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">Mercuryh3> <p class="symbol">Hgp> <p class="number">80p> <p class="weight">200.59p> div>
而js代码可以直接黏贴这段自执行函数，就可以实现想要的功能。
对于此插件的js文档请到我个人主页的文件中下载。