前端瀑布流 css实现 js实现

已于 2023-04-24 09:38:03 修改
阅读量197 收藏
点赞数
分类专栏： javascript css 前端js基础效果 文章标签： 前端 javascript html
于 2021-11-18 15:49:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/divpoxiao/article/details/121402609
版权

css实现（貌似有兼容性问题 暂时火狐支持）

.list{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap: 10rpx;
	grid-template-rows:masonry;
}

瀑布流布局 代码可当做参考 根据自己的实际状况做下修改 

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			
			#app {
				max-width: 900px;
				margin: 0 auto;
				border: 1px solid #f00;
				height: 50px;
				padding-top: 300px;
			}
			/*宫格布局  grid-column-gap: 10px; 这个只是预览是宽度 不影响最终结果*/
			
			.list {
				position: relative;
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-column-gap: 10px;
			}
			
			.item {
				margin-bottom: 10px;
			}
			
			.item img {
				width: 100%;
				display: block;
				margin: 0 auto;
				opacity: 0.1;
				transition: opacity 1s;
			}
			
			.item div {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="list">
				<div v-for="item in list" class="item" v-if="item.src">
					<img  :src="item.src" alt="" @load="imgLoad($event)" />
					<div>{{item.text}}</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// vue
			var app = new Vue({
				el: '#app',
				data: {
					list: images,

					colCount: 5, //列的数量 这里和宫格布局时相互对应 grid-template-columns: repeat(5, 1fr); 
					colHeightArray: [], //  存放每一列的高度的数组 横向一排

					lock: false //分页锁

				},
				created() {
					//设置初始 首列位置 默认为0 第一排也必须为0
					for(var i = 0; i < this.colCount; i++) {
						this.colHeightArray[i] = 0;
					}
					//滚动到底部分页
					window.addEventListener('scroll', () => {

						
						var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
						var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
						var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
						if(scr + clientHeight + 10 >= scrHeight) {
							if(this.lock)
								return
							this.lock = true
							this.list = [...this.list, ...images]

						}
					});

				},
				methods: {
					//监听图片加载完成
					imgLoad(e) {
						//获取当前元素
						let el = e.currentTarget
						//获取最低的那个高度 初始时上面已设置为0
						var minHeight = this.colHeightArray[0];
						//高度最低元素的下标
						var minIndex = 0;
						//循环当前列 获取最低高度和最低高度元素的下标
						for(var i = 0; i < this.colCount; i++) {
							if(this.colHeightArray[i] < minHeight) {
								minHeight = this.colHeightArray[i];
								minIndex = i;
							}
						}
						//动态重置 元素位置

						$(el).parent().css({
							//设置 定位
							position: 'absolute',
							//元素距离左侧的距离 那个10为间距 可自行调整 和css中grid-column-gap: 10px; 意思相同
							left: minIndex * ($(el).parent().width() + (minIndex != 0 ? 10 : 0)),
							//距离顶部的距离
							top: minHeight,
							//重设宽度 grid布局需要重新设置 写死的话择不需要
							width: $(el).parent().width(),
						})
						$(el).css({
							opacity:1
							
						})
						//解开分页锁
						if($(el).parent().index() == this.list.length - 1) {
							this.lock = false
						}
						//重新设置 存放每一列的高度的数组
						this.colHeightArray[minIndex] += $(el).parent().outerHeight(true)
					}
				}
			})
		</script>
	</body>

</html>

images 数据（或者自行查找）

	var images = [{
					src: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-4.jpg',
					text: '天狼绘梦者'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-3.jpg',
					text: '梁祝'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-2.jpg',
					text: '修竹墨客'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-1.jpg',
					text: '惊鸿之笔'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-1.jpg',
					text: '孤猎'
				},
				{
					src: 'https://pic2.52pk.com/files/190419/7913716_103558_1_lit.jpg',
					text: '瑶妹'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-2.jpg',
					text: '鲨之猎刃'
				},
				{
					src: 'https://pic2.52pk.com/files/190419/7913716_103610_1_lit.jpg',
					text: '瑶妹'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-1.jpg',
					text: '破镜之刃'
				},
				{
					src: 'https://up.enterdesk.com/edpic/09/27/bb/0927bb0c7831705c2123d5f481f7761b.jpg',
					text: '露娜紫霞仙子'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-2.jpg',
					text: '冰刃幻境'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-3.jpg',
					text: '炽阳神光'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-3.jpg',
					text: '神威'
				},
				{
					src: 'https://up.enterdesk.com/edpic/d6/be/a7/d6bea7953a832383937b5a95cb21bacb.jpg',
					text: '街头霸王'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-2.jpg',
					text: '幸存者'
				},
				{
					src: 'https://up.enterdesk.com/edpic/80/e7/28/80e7287dfc378f23cd495bb2090d651f.jpg',
					text: '白龙吟'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-1.jpg',
					text: '冷晖之枪'
				},
				{
					src: 'https://up.enterdesk.com/edpic/c1/45/fc/c145fcb10e8ac99dd2cd94d686b602ee.jpg',
					text: '宫本武藏地狱之眼'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-3.jpg',
					text: '云间偶戏'
				},
				{
					src: 'https://up.enterdesk.com/edpic/f8/ea/79/f8ea79b40880e7b2eeeb31b81ff039f9.jpg',
					text: '蔡文姬天籁弦音'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-2.jpg',
					text: '午夜歌剧院'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-1.jpg',
					text: '无间傀儡'
				},
				{
					src: 'https://up.enterdesk.com/edpic/18/63/5d/18635de8c11372bb3f3820c4b5266c39.jpeg',
					text: '王昭君我是歌手'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-6.jpg',
					text: '飞衡'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-5.jpg',
					text: '逐梦之影'
				},
				{
					src: 'https://up.enterdesk.com/edpic/79/34/a5/7934a552d1152c99554ab31ab7b2bc1d.jpg',
					text: '孙膑未来之旅'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-4.jpg',
					text: '白龙吟'
				},
				{
					src: 'https://up.enterdesk.com/edpic/20/0e/86/200e863afeadfb9a17620997651046eb.jpeg',
					text: '成吉思汗苍狼末裔'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-3.jpg',
					text: '教廷特使'
				},
				{
					src: 'https://up.enterdesk.com/edpic/a3/a0/2c/a3a02c9814cae45f190bbee1db811da1.jpg',
					text: '兰陵王刺客信条'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-2.jpg',
					text: '街头霸王'
				},
				{
					src: 'https://up.enterdesk.com/edpic/8c/ec/73/8cec7372c5415d24d3a76a58fce0288a.jpg',
					text: '白起最终兵器'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-1.jpg',
					text: '国士无双'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-4.jpg',
					text: '朱雀志'
				},
				{
					src: 'https://up.enterdesk.com/edpic/3e/e4/4e/3ee44e9f9c0fb551a31ff899e6ae829a.jpeg',
					text: '花木兰传说之刃皮肤'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-3.jpg',
					text: '特工魅影'
				},
				{
					src: 'https://up.enterdesk.com/edpic/e0/dc/42/e0dc420df3f31fc1d045b9f26525e4b5.jpeg',
					text: '孙尚香蔷薇玫瑰皮肤'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-2.jpg',
					text: '绝影神枪'
				},
				{
					src: 'https://up.enterdesk.com/edpic/0b/79/c3/0b79c31bbf32d0b41d35d83d2084d562.jpg',
					text: '达摩拳皇'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-1.jpg',
					text: '静谧之眼'
				},
				{
					src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/163/163-bigskin-2.jpg',
					text: '修罗'
				}
			];

招来红月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
综上所述，这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和可能的JavaScript技巧实现的横向瀑布流布局示例。通过深入研究这些代码，你可以学习到如何在没有依赖外部库的情况下，利用现代CSS3特性构建美观...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局的实现涉及到HTML、CSS和JavaScript的综合运用，需要对前端开发有深入理解。通过以上步骤，我们可以创建一个灵活、自适应的瀑布流布局，适应不同设备和窗口尺寸，提供良好的用户体验。
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
前端瀑布流的实现方法总结
qq_42434695的博客
07-11 408
还有令人头疼的是gutter参数只能使用像素（px）为单位，而且不支持小数，所以只能用js计算百分比得到参数再赋值，一定要取容器宽度的值的百分比！看到网上有很多实现瀑布流的方法，一开始想用纯css试，试了很多后放弃了，网上有很多方法，但是要么很麻烦，要么不能完美实现。第三种用column布局，这个方法会导致原本一个整体元素被拆分为若干份，会出现元素一部分在一列底部，另一部分在另一列顶部的情况，无法完美实现。第二种用flex布局，float布局都会导致垂直方向间距较大等问题，无法完美实现。
前端常用组件——瀑布流
秋书一叶的博客
10-16 1497
通过将一组图片对象分布到指定数量的泳道中实现，每个泳道使用Flex布局，泳道中的图片项高度根据图片对象的属性进行动态设置，以呈现瀑布流效果。// 根据图片数量和泳道数量计算每张图片应该放在哪个泳道。// 计算泳道的宽度百分比，以确保它们平均分布在容器中。// 定义一组图片对象，每个对象包含图片的内容和高度。// 可以添加更多图片项，每个项的高度可以不同。// 计算属性，用于将图片分布到各个泳道。/* 设置图片项的样式，包括间隙 *//* 泳道中的图片从上到下排列 */// 指定泳道的数量。
html实现各种瀑布流(附源码)
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-25 3962
html实现各种瀑布流(附源码)，好看的瀑布流，瀑布流源码，源码下载，带分页的瀑布流，无限加载瀑布流，简易的瀑布流等，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
前端基础（三十四）：实现页面的瀑布流式布局
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
07-09 778
实现页面的瀑布流式布局
vue实现简单瀑布流布局
10-15
在本文中，我们将深入探讨如何使用Vue.js实现一个简单的瀑布流布局。瀑布流布局是一种常见的网页设计模式，它通常用于展示图像或内容，如社交媒体、电商产品列表等。这种布局的特点是容器宽度固定，而高度根据内容...
原生js实现瀑布流效果
10-15
总之，原生JavaScript实现的瀑布流布局提供了灵活性和可扩展性，适用于各种项目。理解其工作原理后，你可以根据实际需求进行定制和优化。同时，瀑布流布局也是前端开发者必须掌握的一项技能，对于提升用户体验有着...
基于JavaScript实现瀑布流效果
10-20
总的来说，这个示例展示了如何结合JavaScript、HTML和Django来实现一个简单的瀑布流布局，通过前端监听滚动事件动态加载图片，以及后端根据请求返回图片数据，实现了一个基本的无限滚动瀑布流效果。这种技术在许多...
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
前端瀑布流布局实现
热门推荐
吴小迪的博客
04-14 3万+
前端开发的过程中难免会遇到瀑布流布局的需求，接下来我就给大家展示代码然后与大家一起分析 首先你的目录结构可以和笔者保持一致： JS笔者单独封装了一个小的工具，用来获取DOM元素 tools.js代码如下： /** * 解决根据类名查找元素的兼容问题 * @param className 待查找的类名 * @param context 可选，查找元素的上下文：即在指定的 context 元素...
原生js实现瀑布流
qq_41109621的博客
09-27 337
【代码】原生js实现瀑布流。
Python《回车桌面图片》
qq_29367075的博客
12-26 1262
今天我们爬取另一个壁纸网站https://tu.enterdesk.com/ 进入首页后： 可以发现有很多的分类，我们直接按照分类来分别爬取。 比如点击一个分类【美女】。https://tu.enterdesk.com/meinv/ 会有很多的照片条目。然后不断往下翻的时候也是不断在刷新更新，经观察network的XHR会发现，每一次的异步请求都是一个html页面哈。分析url如下： https://tu.enterdesk.com/meinv/ https://tu.enterdesk.com/mei
Python爬取百度图片（高清原图）
weixin_51211600的博客
10-10 8342
今日目标如题，爬取百度的图片，高清原图，而不是缩略图：https://image.baidu.com/ 百度图片网站的坑比较多，可能大多数人一看网站发现是动态时就会立马去Network里面找数据了，然后发现里面存的都是缩略图，怎么办？进JS找，然后断点调试等等。。。 这是确实是个办法，但对于我们这种不懂JS的小白根本就不懂呀！ 那还有没有其他办法呢？ 当然是有的，今天我会分享其中一个稍微简单点的办法，加上我前两篇写的跟今天写的如果都学会的话，基本90%的图片都能顺利扒下来，剩下的10%就是那些需要登录
前端页面--瀑布流布局的实现
Jimy_Fengqi
01-28 1万+
前端页面--瀑布流布局的实现       转眼间3个月没有更新了…..最近莫名的迷恋上了前端各种效果的实现了…..最近就记录一下我这几天做毕设时使用的一些效果吧~       今天记录的是我毕设中着重体现的布局风格--瀑布流布局。       说到瀑布流布局，先上张图片来说明一下什么是瀑布流好了。       这个是我毕设中的一个截图（内容是我暂时从其他网站上爬下来测试的….），那么我...
前端手写瀑布流
zhaojiuyi的博客
08-25 642
使用原生js实现一个常见的网页布局——瀑布流
HTML前端实现瀑布流无限加载
DYBOY-程序开发&网络安全
02-28 1085
瀑布流加载是一种不错的前端加载方式，用户的体验也还不错。本次尝试中涉及到布局、图片追加、滚动条监控的内容 主要实现步骤：计算获取高度最低列，添加图片到其下，定时器每次添加图片，下拉加载问题 0x01 布局 前端的布局使用到了flex弹性布局 前端显示图片部分的HTML代码： &lt;div class="gallary"&gt; &lt;!-- 第一列 --&gt; &lt;div cl...
浅析瀑布流布局原理及实现方式
qq_47443027的博客
08-29 2万+
一、瀑布流 　　瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。 　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 　　瀑
前端实现js实现瀑布图代码
09-22
### 回答1： 以下是使用纯 JavaScript 实现瀑布图的示例代码： ...总的来说，通过在HTML中创建父容器、使用JavaScript获取和处理数据并调用Canvas API绘制瀑布图的形状，可以实现前端JS绘制瀑布图的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

招来红月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值