原生js实现瀑布流

最新推荐文章于 2023-03-21 21:12:41 发布

xiaoxiaokeke_

最新推荐文章于 2023-03-21 21:12:41 发布

阅读量113

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xiaoxiaokeke_/article/details/90733598

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考 https://segmentfault.com/a/1190000012621936 这篇文章写的瀑布流，分了三个文件：js、css、html

html文件代码如下：

<!DOCTYPE HTML>
<html>
<head>
	<meta name="author" content="MissAS">
	<meta charset="utf-8">
	<title>瀑布流</title>
	<link rel="stylesheet" type="text/css" href="waterfull.css">
</head>
<body>
	<div class="waterfulltitle">瀑布流</div>
	<div id="wf">
		<div class="witem"><img src="wf/foods (1).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (2).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (3).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (4).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (5).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (6).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (7).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (8).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (9).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (10).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (11).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (12).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (13).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (14).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (15).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (16).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (17).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (18).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (19).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (20).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (21).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (22).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (23).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (24).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (25).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (26).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (27).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (28).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (29).jpg" alt=""></div>
		<div class="witem"><img src="wf/foods (30).jpg" alt=""></div>
	</div>
</body>
<script src="waterfull.js"></script>
</html>

css代码段如下：

*{
	margin: 0;
	padding: 0;
	position: relative;
}
.waterfulltitle
{
	font-size: 36px;
	text-align: center;
	color: palevioletred;
	font-family:knewave;
	font-weight: 600;
}
img
{
	width:220px;
	display: block;
}
body
{
	background-color: antiquewhite;
}
.witem
{
	box-shadow: 2px 2px 2px #999;
	position: absolute;
}

js代码段如下：

"use strict";
var wf=document.getElementById('wf');
var items=wf.children;
var gap=10;
window.onload=function()
{
	function waterfull()
	{
		var pagewidth=getClient().width;
		var itemwidth=items[0].offsetWidth;
		var columns=parseInt(pagewidth/(itemwidth+gap));
		var picarr=[];
		for(var i=0;i<items.length;i++)
			{
				if(i<columns)
					{
						items[i].style.top=0;
						items[i].style.left=(itemwidth+gap)*i+'px';
						picarr.push(items[i].offsetHeight);
					}
				else
					{
						var minheigh=picarr[0];
						var minindex=0;
						for(var j=0;j<picarr.length;j++)
							{
								if(minheigh>picarr[j])
									{
										minheigh=picarr[j];
										minindex=j;
									}
							}
						items[i].style.top=picarr[minindex]+gap+'px';
						items[i].style.left=items[minindex].offsetLeft+'px';
						picarr[minindex]=picarr[minindex]+items[i].offsetHeight+gap;
					}
			}
	}
	waterfull();
	window.onresize=function()
	{
		waterfull();
	};
	window.onscroll=function()
	{
		if(getClient().height+getScrollTop()>=items[items.length-1].offsetTop)
			{
				var datas=[
					"wf/foods (1).jpg",
					"wf/foods (2).jpg",
					"wf/foods (3).jpg",
					"wf/foods (4).jpg",
					"wf/foods (5).jpg",
					"wf/foods (6).jpg",
					"wf/foods (7).jpg",
					"wf/foods (8).jpg",
					"wf/foods (9).jpg",
					"wf/foods (10).jpg",
					"wf/foods (11).jpg",
					"wf/foods (12).jpg",
					"wf/foods (13).jpg",
					"wf/foods (14).jpg",
					"wf/foods (15).jpg",
					"wf/foods (16).jpg",
					"wf/foods (17).jpg",
					"wf/foods (18).jpg",
					"wf/foods (19).jpg",
					"wf/foods (20).jpg",
					"wf/foods (21).jpg",
					"wf/foods (22).jpg",
					"wf/foods (23).jpg",
					"wf/foods (24).jpg",
					"wf/foods (25).jpg",
					"wf/foods (26).jpg",
					"wf/foods (27).jpg",
					"wf/foods (28).jpg",
					"wf/foods (29).jpg",
					"wf/foods (30).jpg"
				];
				for(var x=0;x<datas.length;x++)
					{
						var div=document.createElement("div");
						div.className="witem";
						div.innerHTML='<img src="'+datas[x]+'" alt="">';
						wf.appendChild(div);
					}
				waterfull();
			}
	};
};

function getClient()
{
	return{
		width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
		
		height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
	};
}
function getScrollTop() 
{
        return window.pageYOffset||document.documentElement.scrollTop;
}

html和css文件比较简单，主要是在js中出现问题。

问题1：对象获取对象的子元素（children）时，不要用class定义元素，要用id定义唯一的元素。

问题2：前端的js执行按照顺序进行，引用的js代码中的οnlοad=function（）{...}；需要用到body加载后的对象内容，如果把js代码放在head中，则body还未加载，导致js执行错误，所以应该把js代码段放到body之后。

xiaoxiaokeke_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现瀑布流

参考 https://segmentfault.com/a/1190000012621936 这篇文章写的瀑布流，分了三个文件：js、css、htmlhtml文件代码如下：<!DOCTYPE HTML><html><head> <meta name="author" content="MissAS"> <meta charse...
复制链接

扫一扫