现有一组图片,数量不定,请问如何做成每行三个显示那样的排列呢 不好意思,我不太会javascript所以在此请教 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 很简单的:<script language=javascript>var len = 20; //图片numbervar img = [];for(var i=0;i<len;i++){ img[i] = "a"+Math.random()*100; //随机产生图片name document.write("<img src='"+img[i]+"'>"); if((i+1)%3==0) document.write("<br>");}</script> [算法]1、将所有 img 顺序输出到 id="imgPanel" 的 div 中2、调用方法,对 div 中的所有 img 进行格式整理[代码]<div id="imgPanel"> <!-- 这里面放所有的 img --> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> <img src="5.jpg"> <img src="6.jpg"> <img src="7.jpg"> <img src="8.jpg"></div><script> var _panel = document.getElementById("imgPanel"); var _pointer = 0; for(var i=0;i<_panel.children.length;i++){ var _child = _panel.children[i]; if(_child.tagName.toUpperCase() != "IMG"){ _pointer++; continue; } if(i!=_panel.children.length-1){ if((i-_pointer)%3==2){ var _br = document.createElement("<br>"); var _node = _panel.children[i+1]; _panel.insertBefore(_br,_node); _pointer++; i++; } } }</script>[局限]1、没有包装成方法,这个你应该自己可以处理2、你的具体环境中,img 输出的情况可能很复杂,比如放在 <span> 或者 <td> 中依据具体情况修改3、未测,有问题通知我 如果 img 的尺寸是固定的话,那么不用 js 纯 CSS都可以搞定阿<style>img{width:100px;height:80px}div{width:350px;}</style><div><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg"><img src="6.jpg"><img src="7.jpg"><img src="8.jpg"></div> 非常谢谢各位的回答。我试了下finaland(小杰) 的代码写得挺好的,测试可以。现在我的这个情况是因为不光要显示图片,还要在图片的下方显示一个标题,所以就要用到表格来控制了。情况大体这样:<table><tr><td> <table><tr><td><img src="1.jpg"></td></tr><tr><td>图片一</td></tr></table></td><td> <table><tr><td><img src="2.jpg"></td></tr><tr><td>图片二</td></tr></table></td><td> <table><tr><td><img src="3.jpg"></td></tr><tr><td>图片三</td></tr></table></td></tr></table>再显示第二排三张图片<table><tr><td> <table><tr><td><img src="4.jpg"></td></tr><tr><td>图片四</td></tr></table></td><td> <table><tr><td><img src="5.jpg"></td></tr><tr><td>图片五</td></tr></table></td><td> <table><tr><td><img src="6.jpg"></td></tr><tr><td>图片六</td></tr></table></td></tr></table>等等今天我用上面的代码试了很久也试不出来这样的效果,又不能不要table,这样就显示不了标题了,所以再诚心请教下,这个地方要怎么改比较好呢? 请问,原型对象 EXTJS4动态加载数据 关于JS 对象的问题 事件添加问题,请教 女子为看电视窝在家7年 双腿腐烂也不出门就医 这个JS总是提示d未定义,如何弄啊?为什么啊? 表格数据导出JSON 关于提示正在加载问题 关于windows CE中javascript和Jscript的问题 怎样写右键菜单 新建一个ASP文件,把里面的代码贴进去,按常理说点击链接之后是不能后退的,为什么replace没起作用? 用图片代替上传按钮代码,请大家帮忙改写得更通用.谢谢
<script language=javascript>
var len = 20; //图片number
var img = [];
for(var i=0;i<len;i++)
{
img[i] = "a"+Math.random()*100; //随机产生图片name
document.write("<img src='"+img[i]+"'>");
if((i+1)%3==0) document.write("<br>");
}
</script>
1、将所有 img 顺序输出到 id="imgPanel" 的 div 中
2、调用方法,对 div 中的所有 img 进行格式整理[代码]
<div id="imgPanel">
<!--
这里面放所有的 img
-->
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
</div>
<script>
var _panel = document.getElementById("imgPanel");
var _pointer = 0;
for(var i=0;i<_panel.children.length;i++){
var _child = _panel.children[i];
if(_child.tagName.toUpperCase() != "IMG"){
_pointer++;
continue;
}
if(i!=_panel.children.length-1){
if((i-_pointer)%3==2){
var _br = document.createElement("<br>");
var _node = _panel.children[i+1];
_panel.insertBefore(_br,_node);
_pointer++;
i++;
}
}
}
</script>
[局限]
1、没有包装成方法,这个你应该自己可以处理
2、你的具体环境中,img 输出的情况可能很复杂,比如放在 <span> 或者 <td> 中
依据具体情况修改
3、未测,有问题通知我
img{width:100px;height:80px}
div{width:350px;}
</style><div>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
</div>
我试了下finaland(小杰) 的代码写得挺好的,测试可以。
现在我的这个情况是因为不光要显示图片,还要在图片的下方显示一个标题,所以就要用到表格来控制了。情况大体这样:
<table><tr>
<td>
<table><tr><td><img src="1.jpg"></td></tr><tr><td>图片一</td></tr></table>
</td>
<td>
<table><tr><td><img src="2.jpg"></td></tr><tr><td>图片二</td></tr></table>
</td>
<td>
<table><tr><td><img src="3.jpg"></td></tr><tr><td>图片三</td></tr></table>
</td>
</tr></table>再显示第二排三张图片<table><tr>
<td>
<table><tr><td><img src="4.jpg"></td></tr><tr><td>图片四</td></tr></table>
</td>
<td>
<table><tr><td><img src="5.jpg"></td></tr><tr><td>图片五</td></tr></table>
</td>
<td>
<table><tr><td><img src="6.jpg"></td></tr><tr><td>图片六</td></tr></table>
</td>
</tr></table>等等
今天我用上面的代码试了很久也试不出来这样的效果,又不能不要table,这样就显示不了标题了,所以再诚心请教下,这个地方要怎么改比较好呢?