? 這里實(shí)現(xiàn)的是，如下圖片所示的效果：

? ? ?當(dāng)然，當(dāng)你看的下圖的時(shí)候，請(qǐng)不要自己想當(dāng)然的認(rèn)為是簡(jiǎn)單的html布局！！！

? ? ?（1）業(yè)務(wù)說(shuō)明：圖片地址是數(shù)據(jù)庫(kù)里存的，圖片是服務(wù)器上的。所遇到的問(wèn)題是，怎么樣它顯示每行4張圖片，不夠4張的也可以正常的顯示出來(lái)。

? ??

?

? ?（2）實(shí)現(xiàn)代碼解釋：

? ? ? 當(dāng)然實(shí)現(xiàn)是用table實(shí)現(xiàn)的，表格和圖片美化，這里就不說(shuō)了。可以直接看if語(yǔ)句里面的。當(dāng)?shù)玫絣ist數(shù)據(jù)的時(shí)候，需要求得總條數(shù)和余數(shù)，

這里是每行4條數(shù)據(jù)，所以對(duì)4取余數(shù)，如果你要對(duì)幾取余就需要把4換成你要取的數(shù)了，當(dāng)然還有t的值。

1 <div class="panel-body">2 <table class="table">3 @{ 4 var result = ViewBag.Allimg;5 6 IQueryable<string> strImgs = result as IQueryable<string>;7 8 if (strImgs != null)9 { 10 List<string> strs = strImgs.ToList(); 11 //得到條數(shù) 12 int count=strs.Count; 13 //得到余數(shù) 14 int yu=count%4; 15 //得到整數(shù)部分 16 int tiao = count - yu; 17 18 //循環(huán)開(kāi)始（外部循環(huán)為行數(shù)據(jù);內(nèi)部循環(huán)為列數(shù)據(jù)（這里共4列）） 19 for (int i = 0; i < count; ) 20 { 21 //加的條數(shù) 22 int t = 4; 23 if (yu > 0 && i == tiao) 24 { t = yu; } 25 <tr> 26 @for (int j = 0; j <t; j++) 27 { 28 <td><img src='@Url.Content("~/images/" + strs[i + j] + "")' class="img-rounded" style="width:250px;height:250px;" alt="第 @(i+j) 條"/></td> 29 } 30 </tr> 31 //最后一次循環(huán)，加余數(shù)，保證index正常 32 if (i == tiao) 33 { i += yu; } 34 else 35 { i += 4;} 36 } 37 38 } 39 } 40 <tr><td colspan="4">沒(méi)有圖片了</td></tr> 41 </table> 42 43 44 </div>

?

? 總結(jié)：如果自己不思考，就等于行尸走肉！ ?交流QQ:1406046087

轉(zhuǎn)載于:https://www.cnblogs.com/LABELNET/p/4384717.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Asp.net MVC 的一些总结（二）——图片显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。