javascript动态生成100个div，每逢10就换一行。请问怎么计算div的TOP值，还有这个效果怎么实现。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript动态生成100个div，每逢10就换一行。请问怎么计算div的TOP值，还有这个效果怎么实现。相关的知识，希望对你有一定的参考价值。
麻烦了，大神
第n个div的Left = (n%10) * div的width
第n个div的Top = parseInt(n/10) * div的height
简言之就是每个div的左边距等于这个div的序号除以10的余数再乘以这个div的宽；每个div的上边距等于这个div的序号除以10的商再乘以这个div的高。 参考技术B <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset=UTF-8>
<title>汪洋大海</title>
<style type="text/css">
</style>
<script type="text/javascript">
var G =
divs : [],
D : 0,// 下0，左1，上2，右3
od : [],
C : function (i)
var div = document.createElement ('div');
div.style.position = 'absolute';
div.style.width = '50px';
div.style.height = '50px';
div.style.textAlign = 'center';
div.style['line-height'] = '50px';
div.style.backgroundColor = 'red';
div.style.color = 'white';
div.style.font = '42px Consolas bolder';
var txt = document.createTextNode (i);
div.appendChild (txt);
return div;
,
I : function (num)
for ( var i = 0; i < num; i++)
var div = this.C (i);
this.divs.push (div);
var vb = document.createElement ('input');
vb.setAttribute ("type", "button");
vb.value = "自动生成一个V字形";
vb.onclick = function ()
G.V ();
this.vb = vb;
document.body.appendChild (vb);
var btn = document.createElement ('input');
btn.type = 'button';
btn.value = '按钮';
btn.onclick = function ()
G.T ();
document.body.appendChild (btn);
,
A : function (divs, isExists, which)
if (!isExists)
for ( var i = 0; i < divs.length; i++)
document.body.appendChild (divs[i]);
which ? this.iExists = 1 : this.oExists = 1;
,
V : function ()
var divs = G.divs;
for ( var i = 0; i < divs.length / 2; i++)
divs[i].style.left = parseFloat (divs[i].style.width) * i + 'px';
divs[divs.length - i - 1].style.top = divs[i].style.top = parseFloat (divs[i].style.height) * (i + 1)+ 'px';
divs[divs.length - i - 1].style.left = parseFloat (divs[i].style.width) * (divs.length - i - 1) + 'px';
G.A (divs, this.iExists, true);
,
// 下，上， 靠上; 左，右, 靠左
// 点击顺序 下，左，上，右
T : function ()
var divs = G.divs;
switch (G.D)
case 0:
for ( var i = 0; i < divs.length / 2; i++)
divs[divs.length - i -1].style.top = divs[i].style.top = parseFloat (divs[i].style.height) * Math.floor(divs.length / 2 - i + 1) + 'px';
divs[i].style.left = parseFloat (divs[i].style.width) * i + 'px';
divs[divs.length - i - 1].style.left = parseFloat (divs[i].style.width) * (divs.length - i - 1) + 'px';
break;
case 1:
for ( var i = 0; i < divs.length / 2; i++)
divs[divs.length - i - 1].style.left = divs[i].style.left = parseFloat (divs[i].style.width) * i + 'px';
divs[divs.length - i - 1].style.top = parseFloat (divs[i].style.height) * (divs.length - i) + 'px';
divs[i].style.top = parseFloat (divs[i].style.height) * (i + 1)+ 'px';
break;
case 2:
G.V ();
break;
case 3:
for ( var i = 0; i < divs.length / 2; i++)
divs[divs.length - i - 1].style.left = divs[i].style.left = parseFloat (divs[i].style.width) * Math.floor(divs.length / 2 - i) + 'px';
divs[divs.length - i - 1].style.top = parseFloat (divs[i].style.height) * (divs.length - i) + 'px';
divs[i].style.top = parseFloat (divs[i].style.height) * (i + 1)+ 'px';
break;
G.D++;
G.D = G.D > 3 ? 0 : G.D;
G.A (divs, this.iExists, true);
,
P : function (sum, each)
this.od = [];
for ( var i = 0; i < sum; i++)
var div = this.C (i);
div.style.border = '1px dashed black';
div.style.top = Math.floor (i / each) * parseFloat (div.style.height) + 500 + 'px';
div.style.left = Math.floor (i % each) * parseFloat (div.style.width) + 'px';
this.od.push (div);
G.A (this.od, this.oExists, false);
;
onload = function ()
G.I (7);
G.P (100, 20);
</script>
</head>
<body>
</body>
</html> 参考技术C http://sandbox.runjs.cn/show/ffvmsa83
这个是我写的一个，点击链接就能看到效果，要看源代码你可以右键，查看页面源代码，就可以了。代码可能不是很好，但是总算也是实现了效果的。嘿嘿追问
javascript动态生成100个div，每逢10就换一行。请问怎么计算div的TOP值
追答http://sandbox.runjs.cn/show/ruf9xlb5
这个是生成一百个div，每十个一行的代码
明白了，谢谢,我javascript是初学，请问有什么方法吗，,DOM好学吗，我很喜欢编程
追答学习js这个东西我觉得没什么捷径，勤奋一些，多看多练习一下慢慢就好了。我也还在学习，大家共同努力奋斗吧。加油！你可以加QQ群119026244，里面很多前端工作者，他们或许能更快捷的帮助你，你加的时候可以写上‘商鉴推荐我加群’，哈哈哈哈哈啊哈
如何为所有动态生成的 div 添加常用的 Javascript 函数？ [复制]
【中文标题】如何为所有动态生成的 div 添加常用的 Javascript 函数？ [复制]【英文标题】：How to add common Java Script function to all div generated dynamically? [duplicate] 【发布时间】：2015-07-19 09:06:17 【问题描述】：如何将javascript函数添加到动态生成的所有div中。在 _data_grid.html 中，div bucket 是动态生成的，id 为 forloop.counter0。我想添加常用的javascript函数。喜欢显示和隐藏 div 的某些部分。所有分区都不一样，希望 JavaScript 函数单独工作。我将如何做到这一点。
_data_grid.html
<section id="grid_content">
% for row in rows%
<div class="bucket" id="bucketforloop.counter0">
row.render
</div>
% empty %
table.get_empty_message
% endfor %
</section>
所有的分割都会分开工作。请看下图，如果我点击1st div上的hidecontent，那么它会隐藏1st div其他会隐藏，如果我点击 2nd div 然后它将隐藏 2nd div，其他 div 不会隐藏。
【问题讨论】：
delegate() 函数或使用 $("document.body").on("div.bucket","click", function()) 应该适合你。 "click"可以替换成你想要的事件
你的意思是$("#grid_content").on("click","div.bucket", function())
@Sanchit，但是所有的潜水都是分开工作的..
你是如何设法忽略所有在你写这个问题时提出的建议的？
在 body 元素上绑定代理不是好习惯。
【参考方案1】：
稍后在您的 javascript 中，与委托绑定。
$(document).ready(function()
$('#grid_content').on('click', '.bucket', function()
...whatever logic you need...
);
);
这将在 grid_content 部分内具有“bucket”类的任何 div 上运行。
对于这将做什么似乎有些混乱。声明说，如果对 div1 执行操作，它应该只影响 div1，对于 div2 和 div3 也是如此。
这就是事件的运作方式。如果单击 div1，它将生成一个单击事件并冒泡到父级#grid_content。使用上面的委托，它将检查......这是一个点击事件吗？是的！它是由具有类桶的元素创建的吗？是的！然后我需要对它应用这个函数。
此时，在函数中使用 $(this) 将允许您引用被点击的 div 的各个 dom 元素。
【讨论】：
但是所有部门都不同，希望 JavaScript 函数单独工作。以上是关于javascript动态生成100个div，每逢10就换一行。请问怎么计算div的TOP值，还有这个效果怎么实现。的主要内容，如果未能解决你的问题，请参考以下文章
如何为所有动态生成的 div 添加常用的 Javascript 函数？ [复制]