jquery plugin Mixitup to implement animation filtering and sorting _jquery

What is Mixitup?

Mixitup is a jquery plugin that provides animation filtering and sorting.
Mixitup is great for managing portfolios, galleries and blogs for any sort or sorted content, but also as a powerful tool for engaging applications in the user interface and data visualization.
Mixitup plays a good job with your existing HTML and CSS, making it a great choice for responding to layouts.
Instead of using absolute positioning to control layout, Mixitup design works with existing online streaming layouts. To use percentages, media inquiries, inline-block, or even curved boxes? No problem!

Page code

<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 the element in the mixed container of the target and class. Classification filtering adds custom data properties to class and sort attributes.

Build your filter control:

class= "Filter" data-filter= ". Category-1" >category 1 
class= "filter" data-filter= ". Category-2" >category 2 

Filtering occurs when the Filter button is clicked.

To build your sort control:

class= "Sort" data-sort= "MY-ORDER:ASC" >ascending order 
class= "sort" data-sort= "My-order:desc" >descending Order 

Sort occurs when the Sort button is clicked.

Css

#Container. mix{ 
  display:none; 
} 

In the style of the item, setting the target element does not display the attribute. Mixitup will display only those matching the current filter element.

Js

Instance Mixitup using jquery on the container:

$ (function () { 
  $ (' #Container '). Mixitup ();  
 

Using the IDs of our containers, we can instantiate the Mixitup and jquery methods. Mixitup ()

View Demo Download Now

The above is the entire contents of this article, I hope you can enjoy.