How to add class dynamically inside a loop using asp - asp-classic

Question

I want to add a class for Masonry in the loop while.
What can I do for loop should be only one?
Is output to the three data three times.
Is there another way?
<div id="box-container">
<div class="grid-sizer"><!-- avl for packery to get grid size --></div>
<%
'creates an array
Dim x, y, z
x = Array("w2 h1", "w1 h2", "w1 h1")
rso()
cate = "fo01"
SQL = " SELECT TOP 3 * FROM ms_dbtable WHERE category = '"& cate &"' ORDER BY sort_idx ASC "
rs.open SQL, dbcon, 3
If Not rs.eof Then
While Not rs.EOF
For Each y In x
%>
<div class='box snip1328 <%=y%>'>
<% If rs("thumb") = "" Then %>
<img src="/img/tlogo.gif"></a>
<% Else %>
<img src="/data/fo01/<%=rs("thumb")%>"></a>
<% End If %>
</div>
<%
Next
%>
<%
rs.MoveNext
Wend
End If
rsc()
%>
<style>
.w1 {width: 138px;}
.h1 {height: 138px;}
.w2 {width: 280px;}
.h2 {height: 280px;}
.w3 {width: 422px;}
.h3 {height: 422px;}
</style>
The result is output as a duplicate image.
The output data has Blurring the face picture.
enter image description here

Answer 1

Since you are selecting TOP 3, and there are three elements in the array,
you could move the array index within the loop using a counter.
If Not rs.eof Then
Dim xindex : xindex=0
While Not rs.EOF
%>
<div class='box snip1328 <%=x(xindex)%>'>
<% If rs("thumb") = "" Then %>
<img src="/img/tlogo.gif"></a>
<% Else %>
<img src="/data/fo01/<%=rs("thumb")%>"></a>
<% End If %>
</div>
<%
xindex = xindex + 1
rs.MoveNext
Wend
End If