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

最新推荐文章于 2024-06-19 11:12:11 发布

阔野星火

最新推荐文章于 2024-06-19 11:12:11 发布

阅读量3.7k

点赞数 6

分类专栏： javaweb 文章标签：前端 java html jquery javascript

本文链接：https://blog.csdn.net/weixin_45891573/article/details/121688974

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

曾经在学习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 ' />"+"&nbsp;&nbsp;&nbsp;&nbsp;小恐龙</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 ' />"+"&nbsp;&nbsp;&nbsp;&nbsp;小恐龙</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>