瀑布流布局

最新推荐文章于 2019-01-08 05:31:04 发布
最新推荐文章于 2019-01-08 05:31:04 发布
阅读量1.1k 收藏 5
点赞数 2
文章标签： 瀑布流布局 瀑布流固定栏数布局 自适应瀑布流布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JinPingQ/article/details/83031886
版权

一堆等宽不等高的数据块组成的页面
现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。
第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的

1、固定栏数布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
				border: 1px solid #CECECE;
				margin: 10px 0;
			}
			ul{
				float: left;
				margin: 0 10px;
			}
			img{
				display: block;
				border:none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/5.jpg"></li>
			<li><img src="img2/7.jpg"></li>
			<li><img src="img2/9.jpg"></li>
			<li><img src="img2/2.jpg"></li>
			<li><img src="img2/4.jpg"></li>
			<li><img src="img2/6.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/1.jpg"></li>
		</ul>
		<ul>
			<li><img src="img2/2.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/9.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/5.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/2.jpg"></li>
		</ul>
		<ul>
			<li><img src="img2/9.jpg"></li>
			<li><img src="img2/7.jpg"></li>
			<li><img src="img2/6.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/1.jpg"></li>
			<li><img src="img2/2.jpg"></li>
			<li><img src="img2/3.jpg"></li>
			<li><img src="img2/8.jpg"></li>
			<li><img src="img2/4.jpg"></li>
		</ul>
		<script type="text/javascript">
			var aUl = document.getElementsByTagName("ul");
			console.log(aUl,Array.from(aUl));
			
			var ch = document.documentElement.clientHeight;
			var data = ["img2/3.jpg","img2/8.jpg","img2/5.jpg"];
			window.onscroll = function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				for(let i = 0; i < aUl.length; i++){
					if(aUl[i].offsetHeight < scrollTop + ch){
						var str = "";
						
						data.forEach(function(item){
							str+=`<li><img src="${item}"></li>`
						});
						/*for(var j = 0; j < data.length; j++){
							str += "<li><img src='"+data[j]+"'></li>"
						}*/
						aUl[i].innerHTML += str;
					}
				}
			}
			
		</script>
	</body>
</html>

2、自适应瀑布流布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			#wrap{
				position: relative;
			}
			#wrap div{
				position: absolute;
				border: 1px solid #CECECE;
			}
			img{
				display: block;
				border:none;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div><img src="img2/1.jpg"></div>
			<div><img src="img2/2.jpg"></div>
			<div><img src="img2/3.jpg"></div>
			<div><img src="img2/4.jpg"></div>
			<div><img src="img2/5.jpg"></div>
			<div><img src="img2/6.jpg"></div>
			<div><img src="img2/7.jpg"></div>
			<div><img src="img2/8.jpg"></div>
			<div><img src="img2/9.jpg"></div>
			<div><img src="img2/2.jpg"></div>
			<div><img src="img2/3.jpg"></div>
			<div><img src="img2/4.jpg"></div>
			<div><img src="img2/5.jpg"></div>
			<div><img src="img2/6.jpg"></div>
			<div><img src="img2/7.jpg"></div>
		</div>
		<script type="text/javascript">
			var data = ["img2/1.jpg","img2/3.jpg","img2/5.jpg"];
			window.onload = window.onresize = function(){
				var oWrap = document.getElementById("wrap");
				var aItems = oWrap.children;//动态获取长度
				//取总宽度
				var totalWidth =  oWrap.offsetWidth;
				//单个区块宽度
				var perWidth = aItems[0].offsetWidth;
				//一行的列数
				var cols = Math.floor(totalWidth/perWidth);
				
				//区块的间距
				var mt = ml = 10;
				
				//排第一行区块的位置
				//保存每一列高度的数组
				var arrHei = [];
				for(var i = 0; i < cols; i++){
					aItems[i].style.top = 0;
					aItems[i].style.left = (perWidth+ml)*i + "px";
					arrHei.push(aItems[i].offsetHeight);
				}
				
				//排剩余的区块
				conPos(cols);
				
				function conPos(startNum){
					for(var i = startNum; i < aItems.length; i++){
						aItems[i].style.left = aItems[getMinIndex(arrHei)].style.left;
						aItems[i].style.top = arrHei[getMinIndex(arrHei)] + mt + "px";
						//拍完一个之后，更新数组
						arrHei[getMinIndex(arrHei)] += aItems[i].offsetHeight + mt;
					}
				}
				
				//定义一个取最小值索引的方法
				
				function getMinIndex(arr){
					var minVal = Math.min.apply(null,arr);
					var minIndex = arr.indexOf(minVal);
					return minIndex;
				}
				
				var ch = document.documentElement.clientHeight;
				window.onscroll = function(){
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					if(arrHei[getMinIndex(arrHei)]<ch+scrollTop){
						var str = "";
						data.forEach(function(item){
							str += `<div><img src="${item}"></div>`;
						})
						oWrap.innerHTML += str;
						conPos(aItems.length-data.length);
					}
				}
				
			}
		</script>
	</body>
</html>
暖ping
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
让你吃透瀑布流布局
Agont_的博客
08-01 1102
接下来给大家介绍一下瀑布流布局，广泛应用于淘x、x东、小红x等各大主流移动端应用中。所谓瀑布流布局，便是指表现为参差不齐的多栏布局，即页面上的内容（如图片、文章摘要等）按照一定的规则排列，但每列的高度不固定。随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。————文心一言直观来看，瀑布流布局的表现如下图。
微信小程序源码 瀑布流布局(学习版)
06-18
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
微信小程序 瀑布流布局 (源码)
05-31
微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...
vue实现简单瀑布流布局
11-21
在 Vue 中实现瀑布流布局可以提供一种美观且响应式的图片展示方式，使得元素在页面上自适应地排列，类似于瀑布逐级下落的效果。在这个场景中，我们将探讨如何使用 Vue 构建一个简单的瀑布流布局，并结合 `vue-lazy...
三种方式实现瀑布流布局
10-20
瀑布流布局是一种网页设计中常用的布局方式，它模仿了自然界的瀑布流淌，使得布局中的元素错落有致，具有强烈的视觉冲击力和艺术美感。其主要特点是列宽固定，高度不一，且列与列之间的间隔可以调整。本文将介绍三种...
微信小程序-实现瀑布流布局demo源代码
05-08
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
瀑布流布局 WaterfallLayout
05-22
瀑布流布局，http://blog.csdn.net/qq_18983205/article/details/72630547对应的代码
瀑布流布局浅析+常用插件介绍（转&改编）
weixin_34391445的博客
01-08 467
http://ued.taobao.com/blog/2011/09/14/waterfall/ “瀑布流布局”随着pinterest网的流行而出名，现在国内使用这种风格布局的网站也越来越多，比如说Mark之，蘑菇街，点点网，哇哦等等。 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pin...
网站布局中的瀑布流式布局
zscmj的专栏
09-16 1791
如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊? 　　类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之 ，蘑菇街 ，点点网 ，以及淘宝最新上线的“哇哦 ” 等等，倒是很流行哈~ 在
瀑布流
dada_master的博客
07-28 405
JS瀑布流 js实现瀑布流布局 window.onload=function(){ waterfall('main','box'); } function waterfall(parent,box) { // 获取mian下的所有box元素 var oParent=document.getElementById(parent); var oBoxs=getByClass
JavaScript实现瀑布流布局详解
"JavaScript瀑布流布局的实现代码和原理介绍" 瀑布流布局，又称为Masonry布局，是一种常用于展示图像或内容的网页设计模式，它的特点在于将内容元素（如图片）按照一定规则排列，形成类似瀑布下落的效果。在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值