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

        曾经在学习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>

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值