HTML5图片瀑布流带筛选功能代码，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5图片瀑布流带筛选功能代码 - php中文网</title>
<!---<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" />
<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 class="grid__link pater" href="http://synd.co/2oQTgFH">
<div class="pater__img"></div>
<div class="pater__content">
<h2 class="pater__title" aria-label="fullstory">See Every Click, Swipe, <br> and Scroll</h2>
<p class="pater__desc">See how users experience your designs with FullStory.</p>
<span class="pater__call">Get it free today!</span>
</div>
</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 class="grid__link pater pater--small" href="http://synd.co/2oQTgFH">
<div class="pater__img"></div>
<div class="pater__content">
<h2 class="pater__title" aria-label="fullstory">See Every Click, Swipe, <br> and Scroll</h2>
<p class="pater__desc">See how users experience your designs with FullStory.</p>
<span class="pater__call">Get it free today!</span>
</div>
</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 class="grid__link pater" href="http://synd.co/2oQTgFH">
<div class="pater__img"></div>
<div class="pater__content">
<h2 class="pater__title" aria-label="fullstory">See Every Click, Swipe, <br> and Scroll</h2>
<p class="pater__desc">See how users experience your designs with FullStory.</p>
<span class="pater__call">Get it free today!</span>
</div>
</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>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="https://www.php.cn/" target="_blank">php中文网</a></p>
</div>
</body>
</html>
全部代码：HTML5图片瀑布流带筛选功能代码
标签：Swipe,20,流带,代码,Get,JS,See,HTML5 From： https://blog.csdn.net/2401_85903333/article/details/139999234