jsp页面中怎么实现每四张图片换行显示？

答案:2 悬赏:20 手机版

解决时间 2021-05-17 08:17

提问者网友：做自己de王妃
2021-05-16 07:20

页面中要从数据库里边读取出N张图片，怎么灵活的控制每四图片作一行。现在少量的图片我是这样控制的。

jsp页面的代码

<%@ page language="java" import="java.util.*,s2jsp.bysj.entity.*,s2jsp.bysj.dao.*" pageEncoding="GBK"%>
<% request.setCharacterEncoding("GBK");
   Product product=new Product();
   ProductDao productDao=new ProductDao();
   List list=productDao.findAllProduct();
%>

    <title>主页</title>

</head>

<body>
<table width="915" height="369" border="0">
<tr>
    <td width="652" height="305"><table width="659" height="285" border="0">
      <tr>
        <td width="307" bgcolor="#999999"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r7_c1.jpg" width="101" height="35" /></td>
        <td width="282" rowspan="2" bgcolor="#999999"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_5_r1_c1.jpg" width="268" height="63" /></td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF">索尼W55降价关卡 [2007-10-07]</td>
        </tr>
      <tr>
        <td>理光R5不到二千 [2007-10-07]</td>
        <td rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_5_r3_c1.jpg" width="268" height="59" /></td>
      </tr>
      <tr>
        <td>MP4关注度排行TOP10 [2007-10-07]</td>
        </tr>
      <tr>
        <td>单反与镜头组合 [2007-10-07]</td>
        <td rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_5_r4_c1.jpg" width="268" height="61" /></td>
      </tr>
      <tr>
        <td>国庆各品牌最好卖的相机 [2007-10-07]</td>
        </tr>
      <tr>
        <td>国庆期间降价最猛八款相机 [2007-10-07]</td>
        <td rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_5_r5_c1.jpg" width="268" height="64" /></td>
      </tr>
      <tr>
        <td height="43">三星好性翻盖E428行货仅1180 [2007-10-07]</td>
        </tr>
    </table></td>
    <td width="247" rowspan="3"><table width="247" border="0">
      <tr>
        <td width="237"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_6.jpg" width="175" height="42" /></td>
      </tr>
      <tr>
        <%
        for(int i=0;i<list.size();i++){
        product=(Product)list.get(i);

       %>
        <td><img src="image/<%=product.getPicture() %>"></td><br>
        </tr>
        <% } %>

    </table></td>
</tr>
<tr>
    <td><table width="307" height="83" border="0">
      <tr>
        <td colspan="3" bgcolor="#CC0000"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r13_c1.jpg" width="187" height="22" /> </td>
        <td width="76" bgcolor="#CC0000"><div align="right"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_c15.jpg" width="79" height="33" /></div></td>
      </tr>
      <tr>
      <%
      for(int i=0;i<list.size()&&i<4;i++){//显示前四张图片
      product=(Product)list.get(i);
       %>
        <td><img src="image/<%=product.getPicture() %>"></td>
      <%}%>
      </tr>
      <tr>
       <%
      for(int i=4;i<list.size()&&i>=4;i++){//显示后四张图片
      product=(Product)list.get(i);
       %>
        <td><img src="image/<%=product.getPicture() %>"></td>
      <%}%>
       </tr>
    </table></td>
</tr>
<tr>
    <td><table width="652" height="102" border="0">
      <tr>
        <td width="204" bgcolor="#CC0000"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/n06.jpg" width="186" height="27" /></td>
        <td colspan="2" bgcolor="#CC0000"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_11_r1_c21.jpg" width="160" height="27" /></td>
        <td bgcolor="#CC0000" align="center"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_c15.jpg" width="79" height="33" /></td>
      </tr>
      <tr>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/cg5_1.jpg" width="21" height="28" /> 业务专线：010-88888888</td>
        <td width="140" rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/tg-9.gif" width="140" height="50" /></td>
        <td width="140" rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/tg-4.gif" width="140" height="50" /></td>
        <td width="140" rowspan="2"><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/tg-3.gif" width="140" height="50" /></td>
      </tr>
      <tr>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/cg5_1.jpg" width="21" height="28" />售后服务：010-66666666</td>
        </tr>
      <tr>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/cg5_1.jpg" width="21" height="28" />传         真：010-8888888</td>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/tg-6.gif" width="140" height="50" /></td>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/tg-7.gif" width="140" height="50" /></td>
        <td><img src="file:///D|/ACCO5.0第二学期/JSP/毕业设计/企业宣传网站/提供给学生的素材/images/d_r11_13_r1_c1.jpg" width="129" height="42" /></td>
      </tr>
    </table></td>
</tr>
</table>
</body>
</html>

目前的页面效果

现在我想做的效果是灵活的控制横向每四张图片换行显示。

最佳答案

五星知识达人网友：玩家
2021-05-16 08:12

可以用CSS来控制就是最好的..简单方便
如果你用sql输出来控制的话
就用
因为i是从0开始的,那么0%4=0,所以这里用i+1
if((i+1)%4==0){
out.print("<br>");
}

全部回答

1楼网友：迟山
2021-05-16 09:40

你循环tr看看，要不就用div装图片，就去循环div

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！