利用js写一个根据高度插入的瀑布流

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量98 收藏 1
点赞数
分类专栏： js 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54932975/article/details/123746291
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			.root{
				width: 1000px;
				border: 2px solid gold;
				/*高度需要根据随机不断变化 */
				margin: 30px auto;
				overflow: hidden;
				/*弹性布局  有坑!!!*/
				/*display: flex;
				justify-content: space-around;*/
			}
			.root ul{
				width: 240px;
				border: 1px solid seagreen;
				float: left;
				color: white;
				margin: 4px;
				text-align: center;
				font-size: 90px;
			}
		</style>
	</head>
	<body>
		<!--底部的div-->
		<div class="root">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	
	//1.获取标签
	var ulArray = document.querySelectorAll("ul");
	//2.定义变量
	
	//3.函数
	//封装随机数
	function randomNum(min, max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	}
	//封装随机背景色
	function randomColor(){
		var red = randomNum(0, 255);
		var green = randomNum(0, 255);
		var blue = randomNum(0, 255);
		return "rgb("+ red + "," + green + "," + blue + ")";
	}
	
	//循环50次  准备创建50个li
	for(var i = 0; i < 50; i++){
		var li = document.createElement("li");
		li.innerHTML = i + 1;
		li.style.backgroundColor = randomColor();
		//随机一个高度
		var height = randomNum(100, 500);
		li.style.lineHeight = height + "px";
		li.style.height = height + "px";
		//想想办法!!看哪个ul高度最小!! 谁最矮  就把新建的li放在哪个ul中!!
		//定义变量    每次循环都假设下标0的ul 最矮!!
		var index = 0; //用来记录最矮的ul的下标!!!
		//循环遍历 4个ul  下标0--3
		for(var j = 1; j < ulArray.length; j++){
			if(ulArray[index].offsetHeight > ulArray[j].offsetHeight){
				index = j;
			}
		}
		//index 就记录着 最矮的 ul的下标!!　类似10个随机数,找最大最小值以及位置
		ulArray[index].appendChild(li);
		
	}
	
	
	
	
</script>

运行结果:
在这里插入图片描述

钱端攻城狮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript实现瀑布流效果
weixin_44849651的博客
01-31 718
今天带来的是js实现瀑布流效果的总结，思路如下 确定每行能存放的图片数量（即列数） ① 获取父级对象； ② 获取包含img的div的父级元素对象数组，即获取类名为 box的对象数组； ③ 获取类名为box的div宽度(通过box[0].offsetWidth获取即可)； ④ 计算一行内能存放多少图片数量（即列数），并给类名为box的div标签的父级元素定宽，即给类名为container的div...
利用JS实现简单的瀑布流加载图片效果
10-19
要实现一个简单的JavaScript瀑布流加载图片的效果，我们需要遵循以下步骤： 1. **设定布局参数**：首先确定页面的列数，这通常取决于屏幕宽度和每个元素的宽度。例如，我们可以根据屏幕宽度动态计算每行应该显示...
css+js瀑布流内容高度自适应
菜鸡奋斗ing的博客
10-18 2299
直接上代码，来不及解释了。↓↓↓/** * 设置瀑布流的高度为窗体高度 */ $("#content").height($(window).height());<div id="content"> <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])">
表格高度根据内容自适应的瀑布流
jia12216的专栏
10-26 612
方法一： 直接计算表格的高度和修改表格的frame。 这种方法的优点是实现简单，对普通表格的简单处理就能实现瀑布流。 缺点：当左右两侧的表格高度总和差别很大，会出现一边表格没有，另一边的表格还有很多，造成左右不基本对称。除非你能保证左右两边的高度基本相当，才能解决这个硬伤。 方法二： 自定义一个基于UICollectionViewFlowLayout的子类实现部分方法，并且计算出每个表格的高度。
在js中的瀑布流布局理解
浮生离梦的博客
06-02 1586
一、瀑布流的理解 瀑布流 1）图片的宽度固定，图片的长度不一样 2）当页面滚动时 ，会再次加载数据，动态的渲染在页面上 3）是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局 4）随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部 5）瀑布流的常见布局方式有三种，分别是等高等宽、等高不等宽和等宽不等高 瀑布流布局的原理 1）设置图片宽度一致 2）根据浏览器宽度以及每...
手把手教你JS如何实现瀑布流布局（jquery）
赏樱看雪撸代码
10-20 776
**前言**：总所周知，瀑布流是一个很常见的一种布局方式，不受div的大小限制，其中针对不同高度的div做空间的充分利用，首先我们用随机高度，固定宽度生成一批div,你可以看看效果： 正文 不难发现都是杂乱无章的，都会在每行的最低框中放下一个。 Jquery如何实现瀑布流布局，那么我们先看实现出来的右侧效果。 首先实现这个效果我们可以分三步走： 确定首行各个div位置，left的偏移值，采用相对布局的方式。 其次应用一个数组存储各个div的高度，找到最低高度，然后将下一个div插入到该下标div下面。
原生JS瀑布流布局，无限加载
09-01
当一个列的高度超过其他列时，新的元素将被添加到下一列。 3. 计算高度：计算每个元素的高度，以便调整列的高度以保持一致。 4. 布局更新：随着窗口大小的变化，可能需要重新计算列数和元素分布。 二、无限加载的...
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
vue实现简单瀑布流布局
11-21
Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中实现瀑布流布局可以提供一种美观且响应式的图片展示方式，使得元素在页面上自适应地排列，类似于瀑布逐级下落的效果。在这个场景中，我们将探讨如何使用 ...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
纯js实现瀑布流（自动适应窗口大小）
To lose to pursue.
01-11 6455
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。 我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。 然后进入下一个循环插入下一行。公式很简单，假设这一行当前的高度为h，则插入一张高和宽为（x，y）的图片时，满足下列关系： h
瀑布流的原理及实现
weixin_43641912的博客
04-18 539
很多图片平铺在页面上，宽度相同，高度不同，错落有致的排列出N列，这样就叫瀑布流。
整理了js实现图片瀑布流效果的步骤
qq_46038677的博客
07-23 399
js实现瀑布流效果步骤 写出基本的HTML内容 加入一些css样式 效果一：将宽度固定化（每一行放的图片个数相同） js方法一：要得到父节点（放置主体内容的div盒子）下的子节点（承载图片的div盒子）个数 先得到主体div里面所有内容（使用“*”获取里面所有节点的class名称），再通过if判断语句得到承载图片的div放进数组中 再获取到屏幕的宽度，再除以图片的宽度就能得到每一行能放下的图片个数（再通过Math.floor()函数向下取整来处理得到的值）
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 381
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 220
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
更新商品前端接口编写
weixin_55639995的博客
07-12 406
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1105
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
写一个h5 瀑布流商品列表
09-22
### 回答1： 非常感谢您的提问，我很乐意为您回答。我们可以使用HTML5和CSS3来构建一个瀑布流商品列表，主要步骤如下：1.创建一个容器，用于存放商品列表；2.使用CSS的float属性来确定商品列表的位置；3.使用JavaScript来根据用户的滚动来加载更多的商品；4.使用AJAX获取服务器端的数据；5.将商品列表插入到容器中；6.使用CSS3实现动画效果。以上就是我们写一个H5瀑布流商品列表的基本步骤，希望能够给您带来帮助。 ### 回答2： H5瀑布流商品列表是一种常见的网页布局方式，可以在移动端设备上展示商品列表，并呈现出瀑布流式的效果。下面是一个简单的H5瀑布流商品列表的实现思路： 1. 首先，我们需要创建一个包含商品信息的数组，每个商品对象包含商品的名称、图片地址、价格等信息。 2. 在HTML中，创建一个包含商品列表的容器元素，如一个div容器。 3. 使用CSS设置容器元素为瀑布流布局，并设置列数和每列之间的间距。 4. 使用JavaScript动态生成商品列表，并将商品图片、名称和价格等信息插入到每个商品项中。 5. 为了实现瀑布流效果，我们需要计算每列的高度，并将新的商品项插入到高度最小的列中。 6. 监听窗口的滚动事件，当滚动到底部时，动态加载更多的商品。 7. 根据需要，可以为商品列表添加筛选、排序等功能。 以上的步骤只是一个简单的示例，实际的瀑布流商品列表可能需要更多的细节和功能。可以根据具体的需求，进一步完善和优化这个H5瀑布流商品列表。 ### 回答3： 瀑布流商品列表是一种常见的网页设计布局，可以让商品以瀑布流的方式显示在页面上，增加页面的美观度和用户体验。下面简要介绍如何创建一个基础的H5瀑布流商品列表。 首先，在HTML中创建一个包含商品列表的容器，可以使用一个<ul>标签来实现，例如： ``` <ul id="goodsList"></ul> ``` 接下来，通过JavaScript动态加载商品数据并添加到列表中。首先，定义一个数组存储商品数据，例如： ``` var goodsData = [ {id: 1, name: '商品1', img: 'img1.jpg', price: '99'}, {id: 2, name: '商品2', img: 'img2.jpg', price: '149'}, ... ]; ``` 然后，使用JavaScript遍历商品数组，并将每个商品的HTML结构动态添加到列表中。这里可以使用字符串拼接的方式构建商品的HTML，例如： ``` var html = ''; for (var i = 0; i < goodsData.length; i++) { html += '<li class="goods-item">'; html += '<img src="' + goodsData[i].img + '" alt="' + goodsData[i].name + '">'; html += '<h3>' + goodsData[i].name + '</h3>'; html += '<p class="price">¥' + goodsData[i].price + '</p>'; html += '</li>'; } ``` 最后，将构建好的HTML插入到页面中的商品列表容器中，例如： ``` document.getElementById('goodsList').innerHTML = html; ``` 在CSS中通过定义适当的样式来实现瀑布流布局，例如设置商品项的宽度和浮动方式，并添加适当的间距等样式。 以上是一个简单的H5瀑布流商品列表的实现方法，可以根据需求对样式和功能进行进一步的修改和增强。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值