не проблема.
Вот пример. Открывать соответственно в IE. Взять какую-нибудь картинку, можно и без неё. Кликая на кнопочки фильтруется, но остаются дырки. Если делать display:block и float:left то образуется выравнивание по левому краю, что не годится к сожалению, так как нужно чтобы было по центру.
<html>
<head>
<style type="text/css">
.imgStyle
{
height:60px;
}
</style>
<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';
totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table style="width:500px;" border="1">
<tr>
<td id="image_list" style="text-align:center">
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType3 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType2 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType1 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
<img class="imgStyle "alt="costType0 cigType0" src="CHESTERFIELD.png" />
</td>
</tr>
</table>
<input type="button" value="costType0" onClick="filter('costType0')"/>
<input type="button" value="costType1" onClick="filter('costType1')"/>
<input type="button" value="costType2" onClick="filter('costType2')"/>
<input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>