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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx8BBwcHDQwNGBAQGBoVERUaHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH//CABEIARgBGAMBEQACEQEDEQH/xAAbAAEBAQEBAQEBAAAAAAAAAAABAAIDBQQGB//aAAgBAQAAAADEqyrapeH0KtqVZW8Ddup06k1p4/QnNbY9MdMbnx21azrSy3S5d1Yz1m0yvgW8dsuxbeXrrj31OR06NFp34yyqyyzx76lWVWZ8VWsa6aaVeH0JO1WVl8Pc/J812fo+plXj3xvN03WmdJeB138XBe09vsVbj9BD1bRap3eFvn56vaX6+5ntcu6sq0s6vGvk+ZtdWe31l1eP0U22cmq10fD18fF10quv1D9Fx+jLm7szLOvFfm571nM3f7DWnj3LO+sylu0eLo+eLM3292Xj3W0yrLL4i8/nkrt9qrcfoZVlZVvEdPLhZvp+l1K8e+N5uyrLM+I6VDa+l7P5f0ff/I8u+NE9VpZ1eMrLLf0P5fB/Tev+Y+7ry8z0PNvAl1Kr4Ktqmf2nl+3+k4/nvY+Dr34PP8OrLK+Mq0tr7vm/RfFdfP8AWz8PX9J+a+Jlll8dlZbUrPLu1o21qVX89o1ouhNtO2uXZeWjoLodS+HttDsV1O3l21Kssqr4Vq1Lalndy7NaWVZV8NU3qVWV5db4r7srK9NK+BLaVlZ6b5drndptTOpfzTMq29Sd+/PsiisrtX88tKqsvTpy7VayrWnpL4buVVlWeXZlVlVW/KNalXVqvSufW5575Wda2q/k2WVdK3pPLrfPn7JtSupvGtKqsrauXZlZVVV/Ly2rU/R2Vbl2cqaNdVW1fj5XfTO8fZ9Sy8e6Ky2p1avAVZW66Vnl3ZZVVZfAV1rUrKty72XRvSqqv//EABkBAQEBAQEBAAAAAAAAAAAAAAEAAgUDBP/aAAgBAhAAAADrkQREUFBERBRHSIIiCoIiIiIiuhEFBFBEREREUdGIiCKCIiIgoo6JBQRREERERFF0KCrMUERERBRFdEKrdjziIJzBUEQnQiS3GfMKCgiIioOiSR6FeeAoiCgiiLokkbqx5hEUERFEXRNaM+XtRnyoCKIIoiugPn5YfsYz5QRFBBEVHRM/NaPsY8swREQURRHRLy84+xM+UREERFFEdEjHkfZYwQRBREURB0YgNAZzvONwUQUREdGCKI8VxneacskURHRIKIvJzi1lKLZREWekQURZsMQJlqKIDpBFBQREREUREZ6YRREFAURFEhZz0oKIgiIiIoiIznqEUERERBRFEBnPUiiIIoIiKiIM5z1yiIgoyQURRFkznt.........完整代码请登录后点击上方下载按钮下载查看