jQueryでできるフィルタリングのご紹介です。

以下がコードサンプルになります。

▼JavaScript

$("button").click(function () {
    var image = $(this).attr("value");
    $("#list li").each(function () {
        $(this).animate({
            "opacity": 0
        }, 300, function () {
            $(this).hide();
            if ($(this).hasClass(image) || image == "all") {
                $(this).show();
                $(this).animate({
                    "opacity": 1
                }, 300);
            }
        });
    });
});
});

▼CSS

button{
	font-size:90%;
	margin-right:10px;
	display:block;
	color:#E9ECEB;
	padding:10px 30px;
	background:#000;
	border-radius:20px;
	border:none;
	display:inline-block;
	cursor:pointer;
}

#buttons button:last-child{
	margin-right:0;
}

button:focus{
	outline:none;
}

button:hover{
	background:#717171;
}

#list{
	margin:10px auto 0;
	padding:10px 10px;
    max-width: 80%;
    background: #ccc;
    height: 650px;
}

#list li{
	margin:10px;
	width:200px;
	height:150px;
	list-style-type:none;
    display: inline-block;
}

▼HTML

    All
    Red
    Blue
    Yellow
    fruit
    flower
    風景
    和風


    

    

    

    

    

    

    

    

    

    

デモページは、こちら