什麼是MixItUp？
MixItUp是一個jQuery插件，提供動畫過濾和排序。
MixItUp是偉大的，像管理投資組合，畫廊和博客的任何分類或排序的內容，而且還可以作為一個功能強大的工具，從事應用程序的用戶界面和數據可視化。
MixItUp起著很好的與您現有的HTML和CSS，使之成為響應布局的絕佳選擇。
而不是用絕對定位來控制布局，MixItUp設計與現有的在線流布局工作。要使用百分比，媒體查詢，inline-block的，甚至是彎曲盒子？沒問題！
頁面代碼
1 2 3 4 5 6 <div id="Container"> <div class="mix category-1" data-my-order="1"> ... </div> <div class="mix category-1" data-my-order="2"> ... </div> <div class="mix category-2" data-my-order="3"> ... </div> <div class="mix category-2" data-my-order="4"> ... </div> </div>MixItUp目標與類混合容器中的元素。分類過濾添加為類和排序屬性添加自定義數據屬性。
建立你的過濾器控制：
1 2 class="filter" data-filter=".category-1">Category 1 class="filter" data-filter=".category-2">Category 2過濾發生在過濾器按鈕被點擊。
建立您的排序控件：
1 2 class="sort" data-sort="my-order:asc">Ascending Order class="sort" data-sort="my-order:desc">Descending Order排序發生在排序按鈕被點擊。
CSS
1 2 3 #Container .mix{ display: none; }在項目的樣式，設置目標元素沒有顯示屬性。 MixItUp將只顯示那些匹配當前的過濾元件。
JS
實例MixItUp上使用jQuery的容器：
1 2 3 $(function(){ $('#Container').mixItUp(); });使用我們的容器的ID，我們可以實例化MixItUp與jQuery的方法.mixItUp（）