HTML5图片瀑布流带筛选功能代码.zip资源-CSDN文库

共32个文件

jpg：24个

js：4个

css：3个

版权申诉

javascript

jQuery

html5

168 浏览量 2022-11-18 22:14:06 上传评论收藏 1.48MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5图片瀑布流带筛选功能代码.zip （32个子文件）

HTML5图片瀑布流带筛选功能代码

HTML5图片瀑布流带筛选功能代码.jpg 83KB

jiaoben5011

css

demo.css 7KB

normalize.css 2KB

img

set1

8.jpg 46KB

2.jpg 54KB

1.jpg 53KB

6.jpg 130KB

3.jpg 68KB

5.jpg 72KB

11.jpg 48KB

4.jpg 97KB

10.jpg 81KB

9.jpg 45KB

7.jpg 116KB

set3

8.jpg 46KB

2.jpg 54KB

1.jpg 53KB

6.jpg 130KB

3.jpg 68KB

5.jpg 72KB

11.jpg 48KB

4.jpg 97KB

10.jpg 81KB

9.jpg 45KB

7.jpg 116KB

index.html 13KB

masonry.pkgd.min.js 23KB

anime.min.js 11KB

main.js 13KB

imagesloaded.pkgd.min.js 5KB

sponsor

pater.css 2KB

FullStory.jpg 7KB

<!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图片瀑布流带筛选功能代码 - 网页模板</title>  <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 im

评论收藏

内容反馈

版权申诉