曾经在学习Java的时候,做过一个电商方面的程序设计,其中一个需求就是根据数据库中商品的数量来动态的添加div,同时展示商品图片、名称、价格等信息,就和某些网购平台展示商品的页面差不多。其他功能不谈,下面主要讲的是动态的添加div。
实现的思路是,先在body标签中建一个空白的div,给它加上id当作外壳,然后将div通过字符串拼接的方式拼接起来,在通过for循环与append()方法向事先创建好的外壳div中添加。过程需要用到 jQuery。
普通排放
如果只是单单的实现自动添加div,那是非常简单的,两步就能搞定。
一、创建外壳div,id设为shell
<body>
<div id="shell"> </div>
</body>
二、创建方法,字符串拼接字符串,我这里给div设置了一些样式,方便展示的时候查看。for循环的条件可以根据自己需要来改变。如果和后端结合,则也可根据后端传来的条件进行循环。
<script type="text/javascript">
$(function() {
a = "<div style='width: 200px; height: 200px; background-color: blue; font-size:30px; margin-top: 200px; margin-left: 200px;'></div>";
for (var n = 0; n < 16; n++) {
$("#shell").append(a);
}
});
</script>
实现结果如下
ok,搞定。
横向排放
你以为这样就结束了吗?我们还可以通过添加浮动来实现div的横向排放。
还是和上面的操作一样,这次只不过是在样式中加了一个浮动float: left
<script type="text/javascript">
$(function() {
a = "<div style='width: 200px; height: 200px; background-color: blue; font-size:30px; margin-top: 200px; margin-left: 200px; float: left;'></div>";
for (var n = 0; n < 16; n++) {
$("#shell").append(a);
}
});
</script>
实现效果如下,这种方法进行添加的div都是在一行中显示,如果页面的比例发生变换,那每行的div个数就会发生变化
改变网页比例后
换行操作
通过if...else...来进行换行判断,我这里是设置了一行四个div
同时我这里多添加了一个字符串b,也是div的拼接,当满足条件时就添加b。
这里我给b先设置了一个清除浮动,之后再添加一个浮动,这样做的目的是切断与a的浮动联系以实现换行,再次添加浮动则是在换行之后能继续与a进行相连。
(我还偷偷加了一张图片和一些文字,因为我觉得之前的结果太单调了)
<script type="text/javascript">
$(function() {
a = "<div style='width: 200px; height: 200px; background-color: blue; font-size: 30px; margin-top: 200px; margin-left: 200px; float: left;'>" +
"<img src='img/myimg.jpg' style='width:200px; height:200px ' />"+" 小恐龙</div>";
b ="<div style='width: 200px; height: 200px; background-color: gold; margin-top: 200px; clear: both; float: left;'></div>";
for (var n = 0; n < 16; n++) {
if (n % 4 != 0) {
$("#shell").append(a);
} else {
$("#shell").append(b);
}
}
});
</script>
实现结果如下,其中金黄色的部分就是b中结果,这样子不管怎么改变网页的比例,每行的div个数都会固定不变。
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
</head>
<script type="text/javascript">
$(function() {
a = "<div style='width: 200px; height: 200px; background-color: blue; font-size: 30px; margin-top: 200px; margin-left: 200px; float: left;'>" +
"<img src='img/myimg.jpg' style='width:200px; height:200px ' />"+" 小恐龙</div>";
b ="<div style='width: 200px; height: 200px; background-color: gold; margin-top: 200px; clear: both; float: left;'></div>";
for (var n = 0; n < 16; n++) {
if (n % 4 != 0) {
$("#shell").append(a);
} else {
$("#shell").append(b);
}
}
});
</script>
<body>
<div id="shell"> </div>
</body>
</html>