图库展示-瀑布流流水布局

最新推荐文章于 2021-06-17 07:44:07 发布
最新推荐文章于 2021-06-17 07:44:07 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39668819/article/details/106349389
版权

基于Masonry的网格瀑布流

效果展示

在这里插入图片描述

Demo

下载地址: https://download.csdn.net/download/qq_39668819/12460677

编码实现

js依赖：这三个js由于篇幅问题，就不在本文中引入了，可以自行下载；或者直接下载我的demo。

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

anime.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于Masonry的网格瀑布流加载动画特效</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/anime.css"/>
    <script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">

<svg class="">
    <symbol id="icon-arrow" viewBox="0 0 24 24">
        <title>arrow</title>
        <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
    </symbol>
    <symbol id="icon-drop" viewBox="0 0 24 24">
        <title>drop</title>
        <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/>
        <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
    </symbol>
</svg>

<main>
    <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 id="grid--type" class="grid grid--type">

        </div>
    </div>
</main>

<script src="../../../statics/plug-in/hexo/js/jquery.min.js"></script>
<script type="text/javascript">
    loading();

    function loading() {
        var data = '<div class="grid__sizer"></div>';
        for (var i = 0; i < 197; i++) {
            data += '<div class="grid__item">'
                +'<a class="grid__link" href="#"><img class="grid__img" src="./img/webp/akieay_cartoon'+i+'.webp" alt="Some image"/></a>'
                +' </div>'
        }
        $("#grid--type").html(data);
    }

</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>
</body>
</html>

normalize.css

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

anime.css

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto Mono', monospace;
	font-size: 14px;
	font-weight: 500;
	color: #82888a;
	background: #2c2d31;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2c2d31;
}

.loading::after {
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 8px solid #383a41;
	border-bottom-color: #565963;
	border-radius: 50%;
	animation: animLoader 0.8s linear infinite forwards;
}

@keyframes animLoader {
	to { transform: rotate(360deg); }
}

a {
	text-decoration: none;
	color: #f2f2f2;
	outline: none;
}

a:hover,
a:focus {
	color: #e6629a;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

main {
	display: flex;
	flex-wrap: wrap;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.content--side {
	position: relative;
	z-index: 100;
	width: 15vw;
	min-width: 130px;
	max-height: 100vh;
	padding: 0 1em;
	order: 2;
}

.content--center {
	flex: 1;
	max-width: calc(100vw - 260px);
	order: 3;
    margin-top: 10px;
}

.content--right {
	order: 4;
}

.content--related {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	padding: 8em 1em 3em;
	text-align: center;
	order: 5;
}

.media-related {
	width: 100%;
}

.media-item {
	padding: 1em;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.7;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	font-size: 1em;
	max-width: 220px;
	padding: 0.5em;
	margin: 0 auto;
}

/* Header */
.codrops-header {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 3em 1em 4em;
	order: 1;
}

.codrops-header__title {
	font-size: 1em;
	font-weight: normal;
	flex: 1;
	margin: 0 7em 0 0;
	text-align: center;
	text-transform: lowercase;
}

.codrops-header__title::before,
.codrops-header__title::after {
	font-size: 22px;
	font-weight: bold;
	display: inline-block;
	padding: 0 0.25em;
	color: #42454c;
}

.codrops-header__title::after {
	content: '\2309';
	vertical-align: sub;
}

.codrops-header__title::before {
	content: '\230A';
}

/* GitHub corner */
.github-corner {
	position: absolute;
	top: 0;
	right: 0;
}

.github-corner__svg {
	fill: #82888a;
	color: #2c2d31;
	position: absolute;
	top: 0;
	border: 0;
	right: 0;
}

.github-corner:hover .octo-arm {
	animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
	0%,
	100% {
		transform: rotate(0);
	}
	20%,
	60% {
		transform: rotate(-25deg);
	}
	40%,
	80% {
		transform: rotate(10deg);
	}
}

@media (max-width:500px) {
	.github-corner:hover .octo-arm {
		animation: none;
	}
	.github-corner .octo-arm {
		animation: octocat-wave 560ms ease-in-out;
	}
}


/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 2.75em;
	margin: 0 0 0 2.25em;
	text-align: center;
	white-space: nowrap;
	background: #1f2125;
}

.codrops-links::after {
	content: '';
	position: absolute;
	top: -10%;
	left: calc(50% - 1px);
	width: 2px;
	height: 120%;
	background: #2c2d31;
	transform: rotate3d(0,0,1,22.5deg);
}

.codrops-icon {
	display: inline-block;
	padding: 0 0.65em;
}

/* Controls */
.control--grids {
	margin: 0 0 2.5em;
	text-align: right;
}

.control__title {
	font-size: 0.85em;
	display: block;
	width: 100%;
	margin: 0 0 1em;
	color: #e6629a;
}

.control__item {
	position: relative;
	display: block;
	margin: 0 0 0.5em;
}

.control__radio {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}

.control__label {
	white-space: nowrap;
}

.control__radio:checked + .control__label {
	color: #fff;
	background: #673ab7;
}

.control__radio:not(:checked):hover + .control__label,
.control__btn:hover {
	color: white;
}

.control__btn {
	display: block;
	width: 100%;
	margin: 0 0 0.5em;
	padding: 0;
	text-align: left;
	color: inherit;
	border: none;
	background: none;
}

.control__btn:focus {
	outline: none;
}

/* Grid */

.grid {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 auto;
    width: 75%;
    margin: 20px auto;
}

.grid--hidden {
	position: fixed !important;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	opacity: 0;
}

.js .grid--loading::before,
.js .grid--loading::after {
	content: '';
	z-index: 1000;
}

.js .grid--loading::before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #2c2d31;
}

.js .grid--loading::after {
	position: absolute;
	top: calc(25vh - 20px);
	left: 50%;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -20px;
	border: 8px solid #383a41;
	border-bottom-color: #565963;
	border-radius: 50%;
	animation: animLoader 0.8s linear forwards infinite;
}

.grid__sizer {
	margin-bottom: 0 !important;
}

.grid__link,
.grid__img {
	display: block;
    border-radius: 6px;
}

.grid__img {
	width: 100%;
}

.grid__deco {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.grid__deco path {
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
}

.grid__reveal {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	background-color: #2c2d31;
}

.grid .grid__item,
.grid .grid__sizer {
	width: calc(50% - 20px);
	margin: 0 10px 20px;
}

@media screen and (min-width: 60em) {
	.grid .grid__item,
	.grid .grid__sizer {
		width: calc((100% / 3) - 20px);
		margin: 0 10px 20px;
	}
}

@media screen and (min-width: 70em) {
	.grid .grid__item,
	.grid .grid__sizer {
		width: calc(25% - 30px);
		margin: 0 15px 30px;
	}

	.grid--type .grid__item,
	.grid--type .grid__sizer {
		width: calc(25% - 16px);
		margin: 3px 3px;
        border-radius: 8px;
	}
}

@media screen and (max-width: 50em) {
	main {
		display: block;
	}
	.codrops-header {
		padding: 1em;
		flex-wrap: wrap;
	}
	.codrops-links {
		margin: 0;
	}
	.codrops-header__title {
		width: 100%;
		text-align: left;
		flex: none;
		margin: 1em 0;
	}
	.content--side {
		width: 100%;
	}
	.content--right {
		order: 3;
	}
	.content--center {
		max-width: 100vw;
	}
	.control {
		margin: 0 0 1em;
		text-align: left;
	}
	.control__item,
	.control__btn {
		display: inline-block;
	}
	.control__btn {
		width: auto;
	}
}

main.js

;(function(window) {

	/**
	 * GridLoaderFx obj.
	 */
	function GridLoaderFx(el, options) {
		this.el = el;
		this.items = this.el.querySelectorAll('.grid__item > .grid__link');
	}

	/**
	 * Effects.
	 */
	GridLoaderFx.prototype.effects = {
		'Hapi': {
			animeOpts: {
				duration: function(t,i) {
					return 600 + i*75;
				},
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i*50;
				},
				opacity: {
					value: [0,1],
					easing: 'linear'
				},
				scale: [0,1]
			}
		},
		'Amun': {
			// Sort target elements function.
			sortTargetsFn: function(a,b) {
				var aBounds = a.getBoundingClientRect(),
					bBounds = b.getBoundingClientRect();

				return (aBounds.left - bBounds.left) || (aBounds.top - bBounds.top);
			},
			animeOpts: {
				duration: function(t,i) {
					return 500 + i*50;
				},
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i * 20;
				},
				opacity: {
					value: [0,1],
					duration: function(t,i) {
						return 250 + i*50;
					},
					easing: 'linear'
				},
				translateY: [400,0]
			}
		},
		'Kek': {
			sortTargetsFn: function(a,b) {
				return b.getBoundingClientRect().left - a.getBoundingClientRect().left;
			},
			animeOpts: {
				duration: 800,
				easing: [0.1,1,0.3,1],
				delay: function(t,i) {
					return i * 20;
				},
				opacity: {
					value: [0,1],
					duration: 600,
					easing: 'linear'
				},
				translateX: [-500,0],
				rotateZ: [15,0]
			}
		},
		'Isis': {
			animeOpts: {
				duration: 900,
				elasticity: 500,
				delay: function(t,i) {
					return i*15;
				},
				opacity: {
					value: [0,1],
					duration: 300,
					easing: 'linear'
				},
				translateX: function() {
					return [anime.random(0,1) === 0 ? 100 : -100,0];
				},
				translateY: function() {
					return [anime.random(0,1) === 0 ? 100 : -100,0];
				}
			}
		},
		'Montu': {
			perspective: 800,
			origin: '50% 0%',
			animeOpts: {
				duration: 1500,
				elasticity: 400,
				delay: function(t,i) {
					return i*75;
				},
				opacity: {
					value: [0,1],
					duration: 1000,
					easing: 'linear'
				},
				rotateX: [-90,0]
			}
		},
		'Osiris': {
			perspective: 3000,
			animeOpts: {
				duration: function() {
					return anime.random(500,1000)
				},
				easing: [0.2,1,0.3,1],
				delay: function(t,i) {
					return i*50;
				},
				opacity: {
					value: [0,1],
					duration: 700,
					easing: 'linear'
				},
				translateZ: {
					value: [-3000,0],
					duration: 1000
				},
				rotateY: ['-1turns',0]
			}
		},
		'Satet': {
			animeOpts: {
				duration: 800,
				elasticity: 600,
				delay: function(t,i) {
					return i*100;
				},
				opacity: {
					value: [0,1],
					duration: 600,
					easing: 'linear'
				},
				scaleX: {
					value: [0.4,1]
				},
				scaleY: {
					value: [0.6,1],
					duration: 1000
				}
			}
		},
		'Atum': {
			sortTargetsFn: function(a,b) {
				var docScrolls = {top : document.body.scrollTop + document.documentElement.scrollTop},
					y1 = window.innerHeight + docScrolls.top,
					aBounds = a.getBoundingClientRect(),
					ay1 = aBounds.top + docScrolls.top + aBounds.height/2,
					bBounds = b.getBoundingClientRect(),
					by1 = bBounds.top + docScrolls.top + bBounds.height/2;

				return Math.abs(y1-ay1) - Math.abs(y1-by1);
			},
			perspective: 1000,
			origin: '50% 0%',
			animeOpts: {
				duration: 800,
				easing: [0.1,1,0.3,1],
				delay: function(t,i) {
					return i*35;
				},
				opacity: {
					value: [0,1],
					duration: 600,
					easing: 'linear'
				},
				translateX: [100,0],
				translateY: [-100,0],
				translateZ: [400,0],
				rotateZ: [10,0],
				rotateX: [75,0]
			}
		},
		'Ra': {
			origin: '50% 0%',
			animeOpts: {
				duration: 500,
				easing: 'easeOutBack',
				delay: function(t,i) {
					return i * 100;
				},
				opacity: {
					value: [0,1],
					easing: 'linear'
				},
				translateY: [400,0],
				scaleY: [
					{value: [3,0.6], delay: function(t,i) {return i * 100 + 120;}, duration: 300, easing: 'easeOutExpo'},
					{value: [0.6,1], duration: 1400, easing: 'easeOutElastic'}
				],
				scaleX: [
					{value: [0.9,1.05], delay: function(t,i) {return i * 100 + 120;}, duration: 300, easing: 'easeOutExpo'},
					{value: [1.05,1], duration: 1400, easing: 'easeOutElastic'}
				]
			}
		},
		'Sobek': {
			animeOpts: {
				duration: 600,
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i*100;
				},
				opacity: {
					value: [0,1],
					duration: 100,
					easing: 'linear'
				},
				translateX: function(t,i) {
					var docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft},
						x1 = window.innerWidth/2 + docScrolls.left,
						tBounds = t.getBoundingClientRect(),
						x2 = tBounds.left +docScrolls.left + tBounds.width/2;

					return [x1-x2,0];
				},
				translateY: function(t,i) {
					var docScrolls = {top : document.body.scrollTop + document.documentElement.scrollTop},
						y1 = window.innerHeight + docScrolls.top,
						tBounds = t.getBoundingClientRect(),
						y2 = tBounds.top + docScrolls.top + tBounds.height/2;

					return [y1-y2,0];
				},
				rotate: function(t,i) {
					var x1 = window.innerWidth/2,
						tBounds = t.getBoundingClientRect(),
						x2 = tBounds.left + tBounds.width/2;

					return [x2 < x1 ? 90 : -90,0];
				},
				scale: [0,1]
			}
		},
		'Ptah': {
			itemOverflowHidden: true,
			sortTargetsFn: function(a,b) {
				return b.getBoundingClientRect().left - a.getBoundingClientRect().left;
			},
			origin: '100% 0%',
			animeOpts: {
				duration: 500,
				easing: 'easeOutExpo',
				delay: function(t,i) {
					return i * 20;
				},
				opacity: {
					value: [0,1],
					duration: 400,
					easing: 'linear'
				},
				rotateZ: [45,0]
			}
		},
		'Bes': {
			revealer: true,
			revealerOrigin: '100% 50%',
			animeRevealerOpts: {
				duration: 800,
				delay: function(t,i) {
					return i*75;
				},
				easing: 'easeInOutQuart',
				scaleX: [1,0]
			},
			animeOpts: {
				duration: 800,
				easing: 'easeInOutQuart',
				delay: function(t,i) {
					return i*75;
				},
				opacity: {
					value: [0,1],
					easing: 'linear'
				},
				scale: [0.8,1]
			}
		},
		'Seker': {
			revealer: true,
			revealerOrigin: '50% 100%',
			animeRevealerOpts: {
				duration: 500,
				delay: function(t,i) {
					return i*50;
				},
				easing: [0.7,0,0.3,1],
				translateY: [100,0],
				scaleY: [1,0]
			},
			animeOpts: {
				duration: 500,
				easing: [0.7,0,0.3,1],
				delay: function(t,i) {
					return i*50;
				},
				opacity: {
					value: [0,1],
					duration: 400,
					easing: 'linear'
				},
				translateY: [100,0],
				scale: [0.8,1]
			}
		},
		'Nut': {
			revealer: true,
			revealerColor: '#1d1d1d',
			itemOverflowHidden: true,
			animeRevealerOpts: {
				easing: 'easeOutCubic',
				delay: function(t,i) {
					return i*100;
				},
				translateX: [
					{value: ['101%','0%'], duration: 400 },
					{value: ['0%','-101%'], duration: 400}
				]
			},
			animeOpts: {
				duration: 900,
				easing: 'easeOutCubic',
				delay: function(t,i) {
					return 400+i*100;
				},
				opacity: {
					value: 1,
					duration: 1,
					easing: 'linear'
				},
				scale: [0.8,1]
			}
		},
		'Shu': {
			lineDrawing: true,
			animeLineDrawingOpts: {
				duration: 800,
				delay: function(t,i) {
					return i*150;
				},
				easing: 'easeInOutSine',
				strokeDashoffset: [anime.setDashoffset, 0],
				opacity: [
					{value: [0,1]},
					{value: [1,0], duration: 200, easing: 'linear', delay:500}
				]
			},
			animeOpts: {
				duration: 800,
				easing: [0.2,1,0.3,1],
				delay: function(t,i) {
					return i*150 + 800;
				},
				opacity: {
					value: [0,1],
					easing: 'linear'
				},
				scale: [0.5,1]
			}
		}
	};

	GridLoaderFx.prototype._render = function(effect) {
		// Reset styles.
		this._resetStyles();

		var self = this,
			effectSettings = this.effects[effect],
			animeOpts = effectSettings.animeOpts

		if( effectSettings.perspective != undefined ) {
			[].slice.call(this.items).forEach(function(item) {
				item.parentNode.style.WebkitPerspective = item.parentNode.style.perspective = effectSettings.perspective + 'px';
			});
		}

		if( effectSettings.origin != undefined ) {
			[].slice.call(this.items).forEach(function(item) {
				item.style.WebkitTransformOrigin = item.style.transformOrigin = effectSettings.origin;
			});
		}

		if( effectSettings.lineDrawing != undefined ) {
			[].slice.call(this.items).forEach(function(item) {
				// Create SVG.
				var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
					path = document.createElementNS('http://www.w3.org/2000/svg', 'path'),
					itemW = item.offsetWidth,
					itemH = item.offsetHeight;

				svg.setAttribute('width', itemW + 'px');
				svg.setAttribute('height', itemH + 'px');
				svg.setAttribute('viewBox', '0 0 ' + itemW + ' ' + itemH);
				svg.setAttribute('class', 'grid__deco');
				path.setAttribute('d', 'M0,0 l' + itemW + ',0 0,' + itemH + ' -' + itemW + ',0 0,-' + itemH);
				path.setAttribute('stroke-dashoffset', anime.setDashoffset(path));
				svg.appendChild(path);
				item.parentNode.appendChild(svg);
			});

			var animeLineDrawingOpts = effectSettings.animeLineDrawingOpts;
			animeLineDrawingOpts.targets = this.el.querySelectorAll('.grid__deco > path');
			anime.remove(animeLineDrawingOpts.targets);
			anime(animeLineDrawingOpts);
		}

		if( effectSettings.revealer != undefined ) {
			[].slice.call(this.items).forEach(function(item) {
				var revealer = document.createElement('div');
				revealer.className = 'grid__reveal';
				if( effectSettings.revealerOrigin != undefined ) {
					revealer.style.transformOrigin = effectSettings.revealerOrigin;
				}
				if( effectSettings.revealerColor != undefined ) {
					revealer.style.backgroundColor = effectSettings.revealerColor;
				}
				item.parentNode.appendChild(revealer);
			});

			var animeRevealerOpts = effectSettings.animeRevealerOpts;
			animeRevealerOpts.targets = this.el.querySelectorAll('.grid__reveal');
			animeRevealerOpts.begin = function(obj) {
				for(var i = 0, len = obj.animatables.length; i < len; ++i) {
					obj.animatables[i].target.style.opacity = 1;
				}
			};
			anime.remove(animeRevealerOpts.targets);
			anime(animeRevealerOpts);
		}

		if( effectSettings.itemOverflowHidden ) {
			[].slice.call(this.items).forEach(function(item) {
				item.parentNode.style.overflow = 'hidden';
			});
		}

		animeOpts.targets = effectSettings.sortTargetsFn && typeof effectSettings.sortTargetsFn === 'function' ? [].slice.call(this.items).sort(effectSettings.sortTargetsFn) : this.items;
		anime.remove(animeOpts.targets);
		anime(animeOpts);
	};

	GridLoaderFx.prototype._resetStyles = function() {
		this.el.style.WebkitPerspective = this.el.style.perspective = 'none';
		[].slice.call(this.items).forEach(function(item) {
			var gItem = item.parentNode;
			item.style.opacity = 0;
			item.style.WebkitTransformOrigin = item.style.transformOrigin = '40% 60%';
			item.style.transform = 'none';

			var svg = item.parentNode.querySelector('svg.grid__deco');
			if( svg ) {
				gItem.removeChild(svg);
			}

			var revealer = item.parentNode.querySelector('.grid__reveal');
			if( revealer ) {
				gItem.removeChild(revealer);
			}

			gItem.style.overflow = '';
		});
	};

	window.GridLoaderFx = GridLoaderFx;

	var body = document.body,
		grids = [].slice.call(document.querySelectorAll('.grid')), masonry = [],
		currentGrid = 0,
		// Switch grid radio buttons.
		switchGridCtrls = [].slice.call(document.querySelectorAll('.control__radio')),
		// Choose effect buttons.
		fxCtrls = [].slice.call(document.querySelectorAll('.control--effects > .control__btn')),
		// The GridLoaderFx instances.
		loaders = [],
		loadingTimeout;

	function init() {
		// Preload images
		imagesLoaded(body, function() {
			// Initialize Masonry on each grid.
			grids.forEach(function(grid) {
				var m = new Masonry(grid, {
					itemSelector: '.grid__item',
					columnWidth: '.grid__sizer',
					percentPosition: true,
					transitionDuration: 0
				});
				masonry.push(m);
				// Hide the grid.
				grid.classList.add('grid--hidden');
				// Init GridLoaderFx.
				loaders.push(new GridLoaderFx(grid));
			});

			// Show current grid.
			grids[currentGrid].classList.remove('grid--hidden');

            //Initializes the image display animation
            loaders[currentGrid]._render('Shu');

			// Init/Bind events.
			initEvents();
			// Remove loading class from body
			body.classList.remove('loading');
		});
	}

	function initEvents() {
		// Switching grids radio buttons.
		switchGridCtrls.forEach(function(ctrl) {
			ctrl.addEventListener('click', switchGrid);
		});
		// Effect selection.
		fxCtrls.forEach(function(ctrl) {
			ctrl.addEventListener('click', applyFx);
		});
	}

	function switchGrid(ev) {
		// Hide current grid.
		grids[currentGrid].classList.add('grid--hidden');
		// New grid.
		var grid = grids.filter(function(obj) { return obj.classList.contains(ev.target.value); })[0];
		// Update currentGrid.
		currentGrid = grids.indexOf(grid);
		// Show new grid.
		grid.classList.remove('grid--hidden');
		masonry[currentGrid].layout();
	}

	function applyFx(ev) {
		// Simulate loading grid to show the effect.
		clearTimeout(loadingTimeout);
		grids[currentGrid].classList.add('grid--loading');

		loadingTimeout = setTimeout(function() {
			grids[currentGrid].classList.remove('grid--loading');

			// Apply effect.
			loaders[currentGrid]._render(ev.target.getAttribute('data-fx'));
		}, 500);
	}

	//执行开始
	init();

})(window);
akieay
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas绘制逼真3D瀑布流动画特效
09-04
html5 canvas绘制逼真3D瀑布流动画特效
html5瀑布流图片鼠标悬停svg变形动画显示标题图片
09-01
html5瀑布流图片鼠标悬停svg变形动画显示标题图片
jquery超炫瀑布流相册插件特效代码--适合做个人博客相册
05-31
jquery超炫瀑布流相册插件特效代码--适合做个人博客相册，
CSS HTML元素布局及Display属性
u012142184的博客
09-23 117
http://www.cnblogs.com/polk6/p/3185692.html
几个新的H5标签介绍
林中明月间丶
06-08 1万+
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu所有浏览器都不支持, nav, section, summary 都是块级元素 &lt;address&gt; 标签定义文档或文章的作者/拥有者的联系信息。兼容所有浏览器 &lt;area&gt; 标签定义图像映射中的区域（注：图像映...
作品展示&图片展示HTML源码-图库不规则排列网页模板-瀑布流.zip
最新发布
03-26
HTML网站源码，专为图片展示打造。这份源码简化了开发流程，节省您构建个人作品集或图片库的时间。具备响应式设计，适应各种屏幕和设备，无论在求职...快速部署，提升工作效率，让每一次展示都成为赢得机会的关键时刻。
粉色漂亮瀑布流布局图库相册css模板-粉色 瀑布流 摄影 相册 图库
11-09
在IT行业中，网页设计是至关重要的一环，而瀑布流布局（Masonry Layout）则是现代网页设计中常用的一种视觉效果，尤其适用于图片展示类网站。在这个主题下，我们主要讨论的是一个名为“粉色漂亮瀑布流布局图库相册...
[编号ZM1072]全屏瀑布流美女图库网站源码
05-08
[编号ZM1072]全屏瀑布流美女图库网站源码
粉色漂亮瀑布流布局图库相册css模板-粉色 瀑布流 摄影 相册 图库 画廊 简洁 展示 css3 html5.rar
02-23
总的来说，这个压缩包提供了一个用现代Web技术构建的、具有粉色主题的瀑布流图库模板，适合创建个性化、吸引人的在线相册或图片展示平台。通过理解和利用CSS3和HTML5的优势，你可以创建一个既美观又功能丰富的网站，...
网站模板源码-全屏瀑布流图片网站源码 瀑布流美女图库模板(demo69)
07-12
网站模板源码-全屏瀑布流图片网站源码 瀑布流美女图库模板(demo69)。资源中包含了详细的系统图文搭建教程。源码都是实际项目，经过测试可以正常稳定运行在服务器，需要具备基础服务器搭建知识，不会搭建的请谨慎购买...
HighchartsJS是一个基于SVG的JavaScript图表库
08-10
Highcharts JS是一个基于SVG的JavaScript图表库，其中对旧版浏览器采用VML和canvas实现
php上传文件
热门推荐
漂渺影子的专栏
09-07 6万+
POST 方法上传本特性可以使用户上传文本和二进制文件。用 PHP 的认证和文件操作函数，可以完全控制允许哪些人上传以及文件上传后怎样处理。 PHP 能够接受任何来自符合 RFC-1867 标准的浏览器（包括 Netscape Navigator 3 及更高版本，打了补丁的 Microsoft Internet Explorer 3 或者更高版本）上传的文件。 相关的设置: 请
Hexo Next 博客添加相册瀑布流
人至贱则无敌
09-25 1704
原文：https://rebootcat.com/2020/09/19/nextphotowall/ 前言 一直没有时间来整理下博客搭建的一些事情，现在补上一篇，给 Hexo Next 博客添加一个相册功能，使用瀑布流的方式。 原理说明 使用 github 作为仓库存储图片文件（图床） 使用 jsdelivr 进行图片 CDN 加速 优点 此种方式的优点是免费，不需要购买其他的对象存储产品；并且使用的是 github 作为图床，图片不会丢失。 早期的博文使用的是七牛云的免费存储，结果后来被他们删掉.
hexo的fluid主题添加瀑布流懒加载相册功能
Hello的World
01-10 1398
首发于:https://www.aigisss.com/blog/posts/798ba833.html 相册演示地址:https://www.aigisss.com/blog/photos/ ,当前演示环境基于hexo===5.2.0 , fluid===1.8.7,很大程度上参考了醉里挑灯赏猫的Hexo NexT 博客增加瀑布流相册页面这篇博客!在此感谢班班提供的帮助!! 创建相册页面 新建相册页 hexo new page photos,编辑 /source/photos/index.md，输入以下内
JavaScript 开发总结(一)
weixin_30951743的博客
08-10 65
数据类型：JavaScript定义的数据类型有字符串、数字、布尔、数组、对象、Null、Undefined，但typeof有区分可判别的数据分类是number、string、boolean、object(null / array)、function和undefined。undefined 这个值表示变量不含有值，null 可以用来清空变量 let a = 100; typeof a;/...
html5新标签+表单新类型、新属性
qq_38068491的博客
09-06 626
1、html5的特点 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。常问的问题：html5有哪些特点（跟html5以前有什么区别），css有哪些新属性？ （文档声明更简单，html5更语义化，html5三维空间，canvas） （css3新属性：图片边框，圆角边框，渐进背景色，3D动画，阴影） 2.h5新增语义化...
重构html布局,重构不完全教程集之一
weixin_36111033的博客
06-17 172
本文作者：IMWeb 结一未经同意，禁止转载“无上甚深微妙法，百千万劫难遭遇，我今见闻得受持，愿解如来真实义。”——《开经偈》html标签ie8- 不支持html5新增标签，可通过引入js来实现：html5shiv或按实际使用手写js兼容，document.createElement最后重置下html5标签的css默认样式：article, aside, details, figcaption, ...
adled点阵原理图库 -baijiahao
08-25
Adled点阵原理图库是一种由Adled公司开发的图库，它主要用于点阵屏幕的显示控制。点阵屏幕由许多LED灯组成，通过点亮和熄灭不同的LED灯来显示出文字、图像或视频等内容。 原理图库包含了点阵屏幕的电路设计和控制原理图。在点阵屏幕中，LED灯被分成行和列，每个LED灯都与一个驱动管脚相连接。控制LED灯亮灭的是点阵屏幕的控制芯片，它通过发送信号给驱动管脚控制LED灯的亮灭。 Adled点阵原理图库中的电路设计图给出了点阵屏幕的每个LED灯的接线方式和控制芯片的连接方式。这些图纸为电子工程师提供了设计和开发点阵屏幕的参考。 通过使用Adled点阵原理图库，工程师可以根据需要设计自己的点阵屏幕电路，并将其应用于各种领域，例如广告显示、信息展示等。 总之，Adled点阵原理图库是一种专门为点阵屏幕设计的图库，通过提供电路设计和控制原理图，帮助工程师设计和开发点阵屏幕，并且可以在各种领域中应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值