HTML5图片瀑布流带筛选功能特效代码下载

HTML5图片瀑布流带筛选功能特效代码下载

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="sponsor/pater.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="sponsor/pater.css" />

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!---<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,500,700" rel="stylesheet">--->
<script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">
<main>
	<header class="codrops-header"></header>
	<div class="content content--side">
		<div class="control control--grids">
			<span class="control__title">switch layout</span>
			<div class="control__item">
				<input class="control__radio" type="radio" name="grid-type" value="grid--type-a" id="control-grid-a" checked>
				<label class="control__label" for="control-grid-a">grid A</label>
			</div>
			<div class="control__item">
				<input class="control__radio" type="radio" name="grid-type" value="grid--type-b" id="control-grid-b">
				<label class="control__label" for="control-grid-b">grid B</label>
			</div>
			<div class="control__item">
				<input class="control__radio" type="radio" name="grid-type" value="grid--type-c" id="control-grid-c">
				<label class="control__label" for="control-grid-c">grid C</label>
			</div>
		</div>	
	</div>
	<div class="content content--side content--right">
		<div class="control control--effects">
			<span class="control__title">run effect</span>
			<button class="control__btn" data-fx="Hapi">Hapi</button>
			<button class="control__btn" data-fx="Amun">Amun</button>
			<button class="control__btn" data-fx="Kek">Kek</button>
			<button class="control__btn" data-fx="Isis">Isis</button>
			<button class="control__btn" data-fx="Montu">Montu</button>
			<button class="control__btn" data-fx="Osiris">Osiris</button>
			<button class="control__btn" data-fx="Satet">Satet</button>
			<button class="control__btn" data-fx="Atum">Atum</button>
			<button class="control__btn" data-fx="Ra">Ra</button>
			<button class="control__btn" data-fx="Sobek">Sobek</button>
			<button class="control__btn" data-fx="Ptah">Ptah</button>
			<button class="control__btn" data-fx="Bes">Bes</button>
			<button class="control__btn" data-fx="Seker">Seker</button>
			<button class="control__btn" data-fx="Nut">Nut</button>
			<button class="control__btn" data-fx="Shu">Shu</button>
		</div>
	</div>
	<div class="content content--center">
		<div class="grid grid--type-a">
			<div class="grid__sizer"></div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/1.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/3.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/7.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/9.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/10.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/11.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/10.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/1.jpg" alt="Some image" /></a>
			</div>
		</div>
		<div class="grid grid--type-b">
			<div class="grid__sizer"></div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/11.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/1.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/7.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/3.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/7.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/1.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/3.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/7.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set1/11.jpg" alt="Some image" /></a>
			</div>
		</div>
		<div class="grid grid--type-c">
			<div class="grid__sizer"></div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/1.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/3.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/5.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/10.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/11.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/7.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/9.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/2.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/4.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/6.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/8.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/10.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/1.jpg" alt="Some image" /></a>
			</div>
			<div class="grid__item">
				<a class="grid__link" href="#"><img class="grid__img" src="img/set3/2.jpg" alt="Some image" /></a>
			</div>
		</div>
	</div>
</main>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到