瀑布流布局，聽起來聽牛逼的樣子，其實就是簡單的子元素篩選功能。不過這一功能在網站頁面布局當中還是很常用的，特別是在電商網站中
經常會有點一個鈕篩選，然后頁面的子元素刷的以下變了樣。接下來，我們先簡單介紹下概念和用法，然后詳解這一功能的實現。
瀑布流概念：
又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。視覺表現為多欄布局，附帶篩選功能，當下在國內十分流行。
瀑布流原理：
通過為子元素定義不同的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文檔請到我個人主頁的文件中下載。