Bài viết này hướng dẫn tự làm bộ lọc nội dung đơn giản sử dụng jQuery với rất nhiều hiệu ứng từ Animate.css. Có thể áp dụng để làm trang Portfolio.

Tự làm bộ lọc nội dung với Animate.css và jQuery

Bài viết sử dụng:

HTML

Trước tiên, ở đây mình chọn Bootstrap 3 mục đích để chia cột, jQuery mình chọn 1.12.4 và Animate.css 4.1.0.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Bạn cũng có thể không dùng Bootstrap nếu muốn vì đây chỉ là phần giao diện. Cấu trúc của nội dung cần lọc như sau.

<ul class="nav nav-pills filter-link m-b-30">
	<li><a href="#" data-filter="1">Nhóm 1</a></li>
	<li><a href="#" data-filter="2">Nhóm 2</a></li>
	<li><a href="#" data-filter="3">Nhóm 3</a></li>
</ul>
<div class="item-list">
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (1).jpg" alt="Tranh 1"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (2).jpg" alt="Tranh 2"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (3).jpg" alt="Tranh 3"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (4).jpg" alt="Tranh 4"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="1"><a href="#"><img src="img/tranh (5).jpg" alt="Tranh 5"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (6).jpg" alt="Tranh 6"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (7).jpg" alt="Tranh 7"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (8).jpg" alt="Tranh 8"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (9).jpg" alt="Tranh 9"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="2"><a href="#"><img src="img/tranh (10).jpg" alt="Tranh 10"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (11).jpg" alt="Tranh 11"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (12).jpg" alt="Tranh 12"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (13).jpg" alt="Tranh 13"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (14).jpg" alt="Tranh 14"></a></div>
	<div class="item-child m-b-30 col-md-2 animate__animated" data-group="3"><a href="#"><img src="img/tranh (15).jpg" alt="Tranh 15"></a></div>
</div>

jQuery

Đầu tiên mình lưu tất cả nội dung vào một biến, sau đó dùng sự kiện bấm vào liên kết để lọc theo thuộc tính data-group.

<script type="text/javascript">
	$(document).ready(function() {
		// Lấy tất cả item-child
		var items = [];
		$('.item-list .item-child').each(function() {
			items.push('<div class="animate__zoomOutDown ' + $(this).attr('class') + '" data-group="' + $(this).data('group') + '">' + $(this).html() + '</div>');
		});
		// Sự kiện khi bấm vào bộ lọc
		$('.filter-link a').click(function (e) {
			e.preventDefault();
			var group = $(this).data('filter');
			$('.item-list .item-child').addClass('animate__faster animate__zoomOutDown');
			$('.item-list .item-child').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
				$('.item-list').html(''); // Làm trống nội dung
				
				// Lấy kết quả
				var result = '';
				for (var i = 0; i < items.length; i++) {
					if (items[i].includes('data-group="' + group + '"')) {
						result += items[i];
					}
				};
				
				$('.item-list').html(result);
				$('.item-list .item-child').removeClass('animate__zoomOutDown').addClass('animate__fadeInUp');
			});
		});
	});
</script>

Các hiệu ứng bạn có thể chọn tại Animate.css.

Xem demo Tải về

Chúc các bạn thành công!