js+css实现三种瀑布流布局方式15种图片布局进入动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：瀑布流
代码描述：js+css实现三种瀑布流布局方式15种图片布局进入动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *,
    *::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;
    }
    
    .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;
    }
    
    .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;
    }
    
    .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 types */
    	.grid--type-b .grid__item,
    	.grid--type-b .grid__sizer {
    		width: calc(20% - 20px);
    		margin: 0 10px 20px;
    	}
    
    	.grid--type-c .grid__item,
    	.grid--type-c .grid__sizer {
    		width: calc(25% - 16px);
    		margin: 0 8px 16px;
    	}
    }
    
    @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;
    	}
    }
    .pater {
    	position: relative;
    	display: block;
    	overflow: hidden;
    	width: 100%;
    	padding: 0 0 1em;
    	background: #fff;
    }
    
    .pater,
    .pater:focus,
    .pater:hover {
    	color: #2c2d31;
    }
    
    .pater::after {
    	content: 'Sponsor';
    	font-size: 0.765em;
    	position: absolute;
    	z-index: 20;
    	bottom: 0;
    	left: 0;
    	padding: 1em;
    	color: #f1bed4;
    }
    
    .pater__img {
    	width: 100%;
    	height: 120px;
    	background: url(data:image/jpeg;base64,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) no-repeat center center;
    	background-size: cover;
    }
    
    .pater__content {
    	font-size: 0.85em;
    	z-index: 9;
    	padding: 1.5em 1em;
    	text-align: center;
    }
    
    .pater__title {
    	font-size: 1em;
    	margin: 0;
    	color: #ca6694;
    }
    
    .pater__call {
    	font-weight: bold;
    }
    
    @media screen and (min-width: 50em) {
    	.pater {
    		height: 240px;
    		background: #1f2125;
    	}
    	.pater--small {
    		height: 200px;
    	}
    	.pater,
    	.pater:focus,
    	.pater:hover {
    		color: #82888a;
    	}
    	.pater__img {
    		position: absolute;
    		z-index: 10;
    		top: 0;
    		left: 0;
    		height: 100%;
    	}
    	.pater__call {
    		color: #fff;
    	}
    	/* Hover Animation */
    	.pater__img,
    	.pater__content,
    	.pater::after {
    		transition: transform 0.3s, opacity 0.3s;
    	}
    
    	.pater:hover::after {
    		opacity: 0;
    		transform: translate3d(0,20px,0);
    	}
    
    	.pater:hover .pater__img {
    		transform: translate3d(0,100px,0) scale3d(0.7,0.7,1);
    	}
    
    	.pater--small:hover .pater__img {
    		transform: translate3d(0,100%,0);
    	}
    
    	.pater__content {
    		position: absolute;
    		top: 50px;
    		left: 0;
    		width: 100%;
    		height: 100%;
    	}
    
    	.pater--small .pater__content {
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    	}
    
    	.pater:hover .pater__content {
    		transform: translate3d(0,-50px,0);
    	}
    }
    </style>

    <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="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link pater" href="">
                        <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="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_100,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" 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="//repo.bfw.wiki/bfwrepo/image/5e0c6ed8b80d9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_500,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link pater pater--small" href="">
                        <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="//repo.bfw.wiki/bfwrepo/image/5e3632bed9568.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" alt="Some image" /></a>
                </div>
                <div class="grid__item">
                    <a class="grid__link" href="#"><img class="grid__img" src="//repo.bfw.wiki/bfwrepo/image/5e5314d9c6386.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90" alt="Some image" /><.........完整代码请登录后点击上方下载按钮下载查看