Simple Grid List Filter Plugin with jQuery and CSS3 - xFilterList

xFilterList is a simple lightweight jQuery plugin used to categorize, sort, and filter a grid of items with CSS3 powered transitions. Inspired by joseluisq's uFilterGrid.

See also:

• jQuery Plugin For Interactive and Filterable Portfolio
• Filter & Shuffle A Grid Of Items with jQuery and CSS3
• jQuery Plugin For Sortable and Filterable Grid of Items - Shuffle

How to use it:

1. Load the jQuery library and the jQuery xFilterList plugin in your Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.xfilterlist.js"></script>

2. Create a grid of items using Html unordered list. Use data-filter attribute to categorize the items so you can filter them by groups. The Items can have multiple groups.

<ul id="sortlist">
  <li data-filter="group-1 group-2">Item 1</li>
  <li data-filter="group-2 group-3">Item 2</li>
  <li data-filter="group-1 group-3">Item 3</li>
  ...
</ul>

3. Create links to filter the items by groups.

<nav id="filters"> 
  Filter by: 
  <a href="javascript:;" data-filter="all">All</a>
  <a href="javascript:;" data-filter="group-1">Group 1</a>
  <a href="javascript:;" data-filter="group-2">Group 2</a>
  <a href="javascript:;" data-filter="group-3">Group 3</a>
</nav>

4. The CSS/CSS3 rules to style the grid and to animate the items when filtering.

/* Filters */

#filters {
  text-align: center;
  color: #ccc;
  font-size: 15px;
  padding: 15px 0 0 0;
}

#filters a {
  color: #373A3C;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  transition: all .2s ease-out;
}

#filters a:first-child { }

#filters a:hover,
 #filters a.active { color: #d37070; }

/* Sortlist */

#sortlist {
  position: relative;
  display: block;
  padding: 0;
  margin: 1.5em auto;
  transition: all .4s ease-out;
}

#sortlist li {
  position: absolute;
  width: 90px;
  height: 90px;
  display: block;
  text-align: center;
  font-size: 3.2em;
  line-height: 1.6em;
  overflow: hidden;
  color: #868686;
  background-color: #E9E9E9;
  box-shadow: inset 0px 0px 0px 1px #CECECE;
  transition: all 0.4s ease-out;
}

#sortlist > li:hover { color: #D17E7E; }

#sortlist li:nth-child(-2n+8),
 #sortlist li:nth-child(8) ~ li:nth-child(-2n+15),
 #sortlist li:nth-child(16) ~ li:nth-child(-2n+24),
 #sortlist li:nth-child(24) ~ li:nth-child(-2n+31),
 #sortlist li:nth-child(32) ~ li:nth-child(-2n+40),
 #sortlist li:nth-child(40) ~ li:nth-child(-2n+47),
 #sortlist li:nth-child(48) ~ li:nth-child(-2n+56),
 #sortlist li:nth-child(56) ~ li:nth-child(-2n+63) { background-color: white; }

#sortlist.filtered > li {
  color: #D17E7E;
  background-color: white;
}

5. The Javascript to enable the plugin.

$(window).on('load', function () {

// In action
var sortlist = $('#sortlist');
var mg = new xFilterList(sortlist, {
// you can set the margin in pixels
margin: 5
});

// Filtering
var filter, links = $('a');
links.on('click', function () {
if (!$(this).hasClass('active')) {

// Retrieve the filter value
filter = $(this).attr('data-filter');
// Filtering by retrieved value
mg.filterBy(filter);

links.removeClass('active');
$(this).addClass('active');

if (filter === 'all') {
sortlist.removeClass('filtered');
} else {
sortlist.addClass('filtered');
}
}

});

// Trigger click event for first link
links.first().trigger('click');
});

Change log:

2014-10-17

• Added new indentation

---

This awesome jQuery plugin is developed by joseluisq. For more Advanced Usages, please check the demo page or visit the official website.