java web 动态添加“div” for循环自动添加、自动换行

阔野星火

2024-06-30 帮助2人

曾经在学习Java的时候，做过一个电商方面的程序设计，其中一个需求就是根据数据库中商品的数量来动态的添加div，同时展示商品图片、名称、价格等信息，就和某些网购平台展示商品的页面差不多。其他功能不谈，下面主要讲的是动态的添加div。

实现的思路是，先在body标签中建一个空白的div，给它加上id当作外壳，然后将div通过字符串拼接的方式拼接起来，在通过for循环与append()方法向事先创建好的外壳div中添加。过程需要用到 jQuery。

普通排放

如果只是单单的实现自动添加div，那是非常简单的，两步就能搞定。

一、创建外壳div，id设为shell

二、创建方法，字符串拼接字符串，我这里给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='https://blog.csdn.net/weixin_45891573/article/details/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='https://blog.csdn.net/weixin_45891573/article/details/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>

这篇好文章是转载于：学新通技术网