使用repeater,遍历数据,不规则排序，不同的样式之间切换

如图最下面那副图片的文字说明在图片的右边，而其它图片的文字说明在图片的下方，要实现这种效果，其实只要在HTML部分用样式控制，就可以达到了。

前台代码：

先在CSS.CSS样式文件里定义二个更换的样式，

.class3{ position:absolute; left:310px; top:600px; width:280px;}

.class4{ }

<div id="main" >
<ul>
 
    <asp:Repeater ID="datalist" runat="server">
        <ItemTemplate>
                <li style="float:left;">
                         <div class='<%# (Container.ItemIndex) == 4 ? "class1" : "class2" %>'><img src="<%#Eval("imgUrl") %>" width="280px" height="180px" /></div><br />
 
                        <div  runat="server" class='<%# (Container.ItemIndex) == 4 ? "class3" : "class4" %>'><a href="newsDisplay.aspx?id=<%#Eval("ID") %>"><div style="margin-top:10px; font-size:12px;">
                            <span style="color:#9D6E31; font-size:16px;">><%#Eval("title") %></span><br />
                           <%#getContent(Eval("content").ToString()) %>
                        </div></a></div>
                </li>
        </ItemTemplate>
    </asp:Repeater>
    </ul>
</div>

最重要的就是class='<%# (Container.ItemIndex) == 4 ? "class3" : "class4" %>'，这句了，这句让数据行索引自己判断是到第几行了，用一个三元运算符判断选择哪个样式。

后台代码很简单，和普通的绑定一样。

代码

 1 public partial class index : System.Web.UI.Page
 2 {
 3     aboutus us = new aboutus();
 4     protected void Page_Load(object sender, EventArgs e)
 5     {
 6         bind();
 7     }
 8     protected string getContent(string str)
 9     {
10         if (str.Length > 80)
11         {
12             str = str.Substring(0, 80) + "...";
13         }
14         return str;
15     }
16     protected void bind()
17     {
18         string sql = "select top 5 ID,title,content,imgUrl from main where type='ABOUTUS' order by  [order] desc";
19         this.datalist.DataSource = DbHelperOleDb.Query(sql);
20         this.datalist.DataBind();
21     }