實現首頁分類欄按樣式循環顯示

主要代碼：

GoodsForm.java

//添加一個計數和一個顏色的變量
	private String count;
	private String color;

GuestController .java

List<GoodsForm> commodityType = goodsService.getType();
		goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
	        //在頁面初始化以前用size()方法對商品類型commodityType計數，計算出有多少類型
		int a=commodityType.size();
	        //使用循環設置Count的值爲i+F  ************  即在前臺能夠顯示文本1F
		for(int i=1;i<=a;i++){
			commodityType.get(i-1).setCount(i+"F");
			
		}
              //使用循環設置Color的值爲"columnT-"+(j%6+1)  ****即在前臺能夠顯示文本相似columnT columnT-1  是css中定義的樣式
                //j%6+1爲控制j爲1到6的循環輸出
		for(int j=0;j<a;j++){
			commodityType.get(j).setColor("columnT"+" "+"columnT-"+(j%6+1));
		}
		model.addAttribute("goodsForm", goodsForm);
    	model.addAttribute("commodityType",commodityType);

style.css

.main{ background: #fff; padding-top: 15px; padding-bottom: 15px;}
.columnT{ border-bottom:solid 1px;}
.columnT i{ width: 44px; height: 60px; vertical-align: middle; margin-right: 15px; font-size: 18px; text-align: center; line-height: 44px}
.columnT a{ float: right; margin-top: 20px; font-size: 14px;}
.columnT-1{ border-color: #fac132;}
.columnT-1 i{ background-position: 0 -40px; color: #fac132}
.columnT-2{ border-color: #94562c;}
.columnT-2 i{ background-position: -50px -40px; color: #94562c}
.columnT-3{ border-color: #ef3799;}
.columnT-3 i{ background-position: -100px -40px; color: #ef3799}
.columnT-4{ border-color: #1acbe5;}
.columnT-4 i{ background-position: -150px -40px; color: #1acbe5}
.columnT-5{ border-color: #ce2404;}
.columnT-5 i{ background-position: -200px -40px; color: #ce2404}
.columnT-6{ border-color: #13713f;}
.columnT-6 i{ background-position: -250px -40px; color: #13713f}

index.html

<div class="container main" th:each="typeInfo,sts:${commodityType}">
	
	<div th:class="${typeInfo.color}">
	<!--th:class 等同於class，只是class後要存放一個存放接收後臺傳來的一個變量時要用th:class  -->
	<!--${typeInfo.color}就是接收後臺設置的color變量      例： columnT columnT-1   -->
	
	<i class="yh"><span th:text="${typeInfo.count}">1F</span></i>
	<!--${typeInfo.count}就是接收後臺設置的count變量      用於前臺顯示   -->	
	
	<span class="h4 yh" th:text="${typeInfo.commodityTypeName}">糧食</span>
	<a th:href="@{initGoods(commodityTypeId=${typeInfo.commodityTypeId})}">更多商品>></a>
</div>