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;
    	ba.........完整代码请登录后点击上方下载按钮下载查看