Masonry/Packery/Isotope layout

Developer
Englishextra
Size
9,966 Kb
Views
6,072
  1. Masonry/Packery/Isotope layout Previews
  2. Masonry/Packery/Isotope layout HTML Codes

How do I make an masonry/packery/isotope layout?

A single HTML page demo with Masonry/Packery/Isotope (with filtering) layout. No jQuery, just Vanilla JS. What is a masonry/packery/isotope layout? How do you make a masonry/packery/isotope layout? This script and codes were developed by Englishextra on 17 January 2023, Tuesday.

Masonry/Packery/Isotope layout Previews
IQ Test

Masonry/Packery/Isotope layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Masonry/Packery/Isotope layout</title>
</head>
<body>	<meta charset="utf-8" />	<title>Masonry/Packery/Isotope layout</title>	<!-- <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Fira+Sans:300,400&amp;subset=cyrillic" /> -->	<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" /> -->	<style>
/*! @import "sitemap-masonry-grid"; */
/*! * masonry grid wrapper */
.masonry-grid-wrapper {	width: 92%;	height: 100%;	max-width: 70.000rem;	padding-top: 1.500rem;	padding-bottom: 1.500rem;	margin: 0 auto;
}
.masonry-grid-wrapper h1 {	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI Light","Segoe WP Light",sans-serif;	font-weight: 300;	font-size: 2.144rem;	text-align: center;	margin: 0 1% 1.500rem 1%;
}
.masonry-grid-wrapper h1 a {	text-decoration: none;	color: inherit;
}
.masonry-grid-wrapper h1 a:hover {	background-color: #BED4EB;
}
.masonry-grid {	display: block;	width: 100%;	background: transparent;	padding: 0;	margin: 0 auto 1.500rem auto;
}
.masonry-grid:after {	display: block;	content: "";	clear: both;
}
.masonry-grid-item {	display: block;	float: left;	font-size: 1.000rem;	font-weight: 300;	color: inherit;	background-color: #FFFFFF;	margin: 2% 1% 0 1%;
}
.masonry-grid-item:hover {	opacity: 0.9;
}
.masonry-grid-sizer {	width: 25%;
}
.masonry-grid-item {	width: 23%;
}
.masonry-grid-item a {	display: block;	text-decoration: none;	color: inherit;
}
.masonry-grid-item img {	display: block;	width: 100%;
}
.masonry-grid-item p {	min-height: 6.750rem;	color: inherit;	padding: 1.000rem;	margin: 0;
}
@media handheld,only screen and (max-width:1080px) {	.masonry-grid-wrapper {	width: 100%;	padding-left: 1.000rem;	padding-right: 1.000rem;	}	.masonry-grid-sizer {	width: 50%;	}	.masonry-grid-item {	width: 48%;	}
}
@media handheld,only screen and (max-width:640px) {	.masonry-grid-wrapper {	width: 100%;	}	.masonry-grid-wrapper h1 {	font-size: 1.772rem;	}
}
@media handheld,only screen and (max-width:360px) {	.masonry-grid-wrapper h1 {	font-size: 1.464rem;	}	.masonry-grid-item {	float: none;	}	.masonry-grid-sizer {	width: 100%;	}	.masonry-grid-item {	width: 98%;	}
}
/*! @import "sitemap-external-sprite"; */
/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
/*
img[class^="image-src-"],img[class*=" image-src-"]{ max-width: 100%; background-size: 100%; background-image: url(//farm1.staticflickr.com/288/31811539160_28f4218b4e_o.jpg); }
.image-src-aids-1200x630 { background-position: 0 0%; background-size: 100%; }
.image-src-articles-1200x630 { background-position: 0 4%; background-size: 100%; }
.image-src-cup-1200x630 { background-position: 0 8%; background-size: 100%; }
.image-src-disqus-1200x630 { background-position: 0 12%; background-size: 100%; }
.image-src-ege-1200x630 { background-position: 0 16%; background-size: 100%; }
.image-src-english4free-1200x630 { background-position: 0 20%; background-size: 100%; }
.image-src-englishextra-app-1200x630 { background-position: 0 24%; background-size: 100%; }
.image-src-englishgrammartips-1200x630 { background-position: 0 28%; background-size: 100%; }
.image-src-gg-1200x630 { background-position: 0 32%; background-size: 100%; }
.image-src-gia-1200x630 { background-position: 0 36%; background-size: 100%; }
.image-src-grammar-1200x630 { background-position: 0 40%; background-size: 100%; }
.image-src-homepage-1200x630 { background-position: 0 44%; background-size: 100%; }
.image-src-irrverbsscr-1200x630 { background-position: 0 48%; background-size: 100%; }
.image-src-languagelink-1200x630 { background-position: 0 52%; background-size: 100%; }
.image-src-macmillan-1200x630 { background-position: 0 56%; background-size: 100%; }
.image-src-more-1200x630 { background-position: 0 60%; background-size: 100%; }
.image-src-oup-1200x630 { background-position: 0 64%; background-size: 100%; }
.image-src-portfolio-1200x630 { background-position: 0 68%; background-size: 100%; }
.image-src-reading-1200x630 { background-position: 0 72%; background-size: 100%; }
.image-src-rosolymp-1200x630 { background-position: 0 76%; background-size: 100%; }
.image-src-rss-1200x630 { background-position: 0 80%; background-size: 100%; }
.image-src-serguei-1200x630 { background-position: 0 84%; background-size: 100%; }
.image-src-tests-1200x630 { background-position: 0 88%; background-size: 100%; }
.image-src-transcripts-1200x630 { background-position: 0 92%; background-size: 100%; }
.image-src-vimeo-1200x630 { background-position: 0 96%; background-size: 100%; }
.image-src-vk-1200x630 { background-position: 0 100%; background-size: 100%; }
*/
/*! @import "sitemap-main"; */
/*! * custom */
html,
body {	height: 100%;
}
html {	font-size: 100%;	/*! * set the parent to background transparent * css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/ */	background-color: transparent;
}
body {	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI","Segoe WP",sans-serif;	font-weight: 400;	font-size: 16px;	line-height: 1.500;	width: 100%;	color: #363636;	background-color: #FFFFFF;	-webkit-text-size-adjust: none;	-ms-text-size-adjust: none;	text-size-adjust: none;	text-rendering: optimizeLegibility;	text-rendering: geometricPrecision;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;	font-smoothing: antialiased;	-webkit-touch-callout: none;	-webkit-tap-highlight-color: rgba(0,0,0,0);	outline: none;	overflow-x: hidden;	margin: 0;	padding: 0;
}
/*! * englishextra specific rules */
a {	color: inherit;	text-decoration: none;	-webkit-tap-highlight-color: rgba(0,0,0,0);	outline: none;
}
a:hover,
a:active,
a:focus {	-webkit-tap-highlight-color: rgba(0,0,0,0);	outline: none;
}
img {	border: 0;	-ms-interpolation-mode: bicubic;	vertical-align: bottom;
}
p:first-child {	margin-top: 0;
}
p:last-child {	margin-bottom: 0;
}
b,
strong,
.bolder {	font-weight: bold;
}
i,
em,
.italic {	font-style: italic;
}
u,
.underline {	text-decoration: underline;
}
*,*:after,
*::before {	box-sizing: border-box;
}
::-moz-selection {	color: rgba(255,255,255,0.9);	background: rgba(48,124,202,0.9);
}
::selection {	color: rgba(255,255,255,0.9);	background: rgba(48,124,202,0.9);
}
/*! * clearfix css-tricks.com/snippets/css/clear-fix/ */
.cf:after {	display: block;	visibility: hidden;	height: 0;	content: "";	clear: both;
}
/*! * fit width */
.fit-width {	min-width: 100%;
}
/*! * fit half width */
.fit-half-width {	min-width: 50%;
}
/*! * hide and show on mobile */
.show-inline-on-mobile,
.show-block-on-mobile {	display: none !important;
}
@media handheld,only screen and (max-width:800px) {	.hide-on-mobile {	display: none !important;	width: 0;	height: 0;	}	.show-inline-on-mobile {	display: inline !important;	}	.show-block-on-mobile {	display: block !important;	}
}
/*! * other */
.page {	width: 100%;	/*! * set the parent to min height 100%, not just height * and position relative to parent, absolute for child */	min-height: 100%;	position: relative;	top: 0;	left: 0;	/* svgeneration.com/recipes/Granite/ #F3F3F3 0.8 0.2 */	background-color: #F3F3F3;	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzMwMCcgdmlld0JveD0nMCAwIDIwMCAzMDAnPgoJPGZpbHRlciBpZD0nZnV6eicgeD0nMCcgeT0nMCc+CgkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyBiYXNlRnJlcXVlbmN5PScwLjgnIG51bU9jdGF2ZXM9JzEwJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+Cgk8L2ZpbHRlcj4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4yJy8+Cjwvc3ZnPg==);	background-position: top left;	background-repeat: repeat;	background-size: 150.000pt 225.000pt;
}
.container {	width: 100%;	height: 100%;	opacity: 0;	-webkit-transition: opacity 0.2s linear;	transition: opacity 0.2s linear;	padding: 0;	margin: 0 auto;
}
/*! * filtering controls */
.holder-filter-controls {	width: 98%;	height: 0;	visibility: hidden;	margin: 0 auto -2% auto;
}
.holder-filter-controls.visible {	height: auto;	visibility: visible;	margin-bottom: 0;
}
.holder-filter-buttons {	text-align: center;	background-color: #474747;	margin: 0;
}
.holder-filter-buttons button,
.holder-filter-buttons button:active,
.holder-filter-buttons button:focus {	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI","Segoe WP",sans-serif;	font-weight: 300;	font-size: 0.875rem;	display: inline-block;	min-width: 7.500rem;	height: 2.250rem;	color: #FFFFFF;	background-color: #474747;	border: 0.750pt solid #474747;	-webkit-tap-highlight-color: rgba(0,0,0,0);	outline: none;	cursor: pointer;
}
.holder-filter-buttons button:hover,
.holder-filter-buttons button.is-active {	background-color: #606060;	border: 0.750pt solid #606060;
}
.holder-filter-buttons button:first-child {	border-radius: 0.313rem 0 0 0.313rem;
}
.holder-filter-buttons button:last-child {	border-radius: 0 0.313rem 0.313rem 0;
}
.holder-filter-select {	display: none;	margin: 0;
}
.filter-select,
.filter-select:active,
.filter-select:focus {	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI","Segoe WP",sans-serif;	font-weight: 300;	font-size: 0.875rem;	display: block;	width: 100%;	height: 2.250rem;	text-align: center;	color: #FFFFFF;	background-color: #474747;	border: 0.750pt solid #474747;	box-sizing: border-box;	-webkit-tap-highlight-color: rgba(0,0,0,0);	outline: none;	cursor: pointer;
}
.filter-select option {	padding: 0.500rem;
}
.filter-select option:hover,
.filter-select option:active,
.filter-select option:focus,
.filter-select option:checked {	box-shadow: inset 2.250rem 2.250rem #606060;
}
@media handheld,only screen and (max-width:1080px) {	.holder-filter-buttons {	display: none;	}	.holder-filter-select {	display: block;	}
}
/*! * colors */
/* .pages-aids {	background-color: #EF6B52;
}
.pages-articles {	background-color: #E84B53;
}
.pages-grammar {	background-color: #2D7C9A;
}
.pages-more {	background-color: #557678;
}
.pages-reading {	background-color: #0179D7;
}
.pages-tests {	background-color: #744DA9;
}
.pages-transcripts {	background-color: #515C6B;
} */
/*! * footer */
.footer {	font-size: 0.813rem;	font-weight: 400;	text-align: center;	/* padding: 0 1.000rem; */	padding: 0 1%;
}
.footer p {	margin: 0;
}
.footer a {	color: inherit;	text-decoration: underline;
}	</style>	</head>	<body>	<div class="page" id="page" role="document">	<div class="container" id="container" role="main">	<div class="masonry-grid-wrapper">	<h1>Masonry/Packery/Isotope layout</h1>	<div class="masonry-filter-controls">	<p class="holder-filter-buttons">	<button data-filter="*">Everything</button><!--	--><button data-filter=".pages-aids">Aids</button><!--	--><button data-filter=".pages-articles">Articles</button><!--	--><button data-filter=".pages-grammar">Grammar</button><!--	--><button data-filter=".pages-reading">Reading</button><!--	--><button data-filter=".pages-tests">Tests</button><!--	--><button data-filter=".pages-transcripts">Transcripts</button>	</p>	<p class="holder-filter-select">	<select class="filter-select">	<option value="*" selected="selected">Everything</option>	<option value=".pages-aids">Aids</option>	<option value=".pages-articles">Articles</option>	<option value=".pages-grammar">Grammar</option>	<option value=".pages-reading">Reading</option>	<option value=".pages-tests">Tests</option>	<option value=".pages-transcripts">Transcripts</option>	</select>	</p>	</div>	<div class="masonry-grid">	<div class="masonry-grid-sizer"></div>	<div class="masonry-grid-item"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm3.staticflickr.com/2845/33493749130_a31948e76e_o.jpg" alt="" /><p>Содержание</p></a></div>	<div class="masonry-grid-item pages-aids"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/684/31374185883_d140dcffd9_o.jpg" alt="" /><p>Пособия - Топики на английском</p></a></div>	<div class="masonry-grid-item pages-aids"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/684/31374185883_d140dcffd9_o.jpg" alt="" /><p>Пособия - Most Commonly Used Idioms</p></a></div>	<div class="masonry-grid-item pages-articles"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/490/32146336076_dcbfd0cc2b_o.jpg" alt="" /><p>Статьи - Правила чтения</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>«Ex-» и «former», или Осторожно: морпехи</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Артикли a / an и the</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Употребление времен</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Фразовые глаголы</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Quick and Dirty Grammar</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - All / the whole / the entire</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Alone / by myself / on my own</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Порядок определений</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Can / could / be able to</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - С большой или с маленькой</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Who / which / that и запятые</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Нарицательное / собственное</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Согласование времен</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Степени сравнения</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Заимствованные слова</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Glossary of Grammatical Terms</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - In / at / on</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - In hospital / at work etc.</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - May / might / be allowed to</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Модальные глаголы</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Much / many / little / few</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Or / nor / neither</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Косвенная речь</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Числа по-английски</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Неконтиниусные глаголы</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Серийная запятая</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - To me / for me, или Надуманная проблема</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Too / enough и so / such</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Перевод причастий и деепричастий</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Расстановка дефисов</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Когда must = «должно быть»</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Порядок слов в предложении</p></a></div>	<div class="masonry-grid-item pages-grammar"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm1.staticflickr.com/712/32066337371_ea6b468c7a_o.jpg" alt="" /><p>Грамматика - Неправильные глаголы (таблица)</p></a></div>	<div class="masonry-grid-item pages-reading"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7355/27893463732_a702f66b32_o.jpg" alt="" /><p>Чтение - Russia-Ukraine War Conflict</p></a></div>	<div class="masonry-grid-item pages-reading"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7355/27893463732_a702f66b32_o.jpg" alt="" /><p>Чтение - The Man with the Scar</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7319/27382311974_074f7c14f0_o.jpg" alt="" /><p>Тесты - Тесты по грамматике</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7433/27893463582_e9cd23a074_o.jpg" alt="" /><p>Тесты - ГИА / ЕГЭ: Задания 33, 39, 40</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7363/27917988381_5160af8947_o.jpg" alt="" /><p>Тесты - ЕГЭ: Задание 40</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7620/27961066706_4cf44109db_o.jpg" alt="" /><p>Тесты - Advanced Grammar in Use Level Test</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7620/27961066706_4cf44109db_o.jpg" alt="" /><p>Тесты - English Grammar in Use Level Test</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7620/27961066706_4cf44109db_o.jpg" alt="" /><p>Тесты - Essential Grammar in Use Level Test</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7363/27917988381_5160af8947_o.jpg" alt="" /><p>Тесты - Демо-вариант ЕГЭ-11 АЯ (ПЧ)</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7363/27917988381_5160af8947_o.jpg" alt="" /><p>Тесты - Демо-вариант ЕГЭ-11 АЯ (УЧ)</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7433/27893463582_e9cd23a074_o.jpg" alt="" /><p>Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (ПЧ)</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7433/27893463582_e9cd23a074_o.jpg" alt="" /><p>Тесты - Демо-вариант ГИА-9 (ОГЭ) АЯ (УЧ)</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7386/27917988681_4fe300893b_o.jpg" alt="" /><p>Тесты - Уровневый тест</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7073/27382311864_c4032f1eca_o.jpg" alt="" /><p>Тесты - Common Mistakes Test Advanced</p></a></div>	<div class="masonry-grid-item pages-tests"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7311/27382311934_28d8298120_o.jpg" alt="" /><p>Тесты - XIV Олимпиада по английскому</p></a></div>	<div class="masonry-grid-item pages-transcripts"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7299/27917988891_a1ca538542_o.jpg" alt="" /><p>Транскрипты - Essential British English Expressions</p></a></div>	<div class="masonry-grid-item pages-transcripts"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7299/27917988891_a1ca538542_o.jpg" alt="" /><p>Транскрипты - 44 Most Often Misspelled Words</p></a></div>	<div class="masonry-grid-item pages-transcripts"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm8.staticflickr.com/7299/27917988891_a1ca538542_o.jpg" alt="" /><p>Транскрипты - English Vocabulary for Business</p></a></div>	<div class="masonry-grid-item"><a href="#" title="There are many variations of passages of Lorem Ipsum available"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJ2AQMAAAB1jukfAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAHNJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF4Nc6kAAekajDwAAAAASUVORK5CYII=" data-src="//farm3.staticflickr.com/2845/33493749130_a31948e76e_o.jpg" alt="" /><p>О сайте «Английский без регистрации»</p></a></div>	</div>	<div class="footer">	<p class="copyright">&#169;&#160;englishextra, 2006&#8212;2017</p>	</div>	</div>	</div>	</div>	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/lazyloadjs/3.2.2/lazyload.min.js"></script> -->	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> -->	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js"></script> -->	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/2.1.1/draggabilly.pkgd.min.js"></script> -->	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.min.js"></script> -->	<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script> -->	<script>	;(function(){function exec(options){if("string"===typeof options){options={url:options};}if(!options.url&&!options.text){throw new Error("must provide a url or text to load");}var head=document.getElementsByTagName("head")[0]||document.documentElement;var script=document.createElement("script");script.charset=options.charset||"utf-8";script.type=options.type||"text/javascript";script.async=!!options.async;if(options.hasOwnProperty("id")){script.id=options.id;}if(options.url){script.src=options.url;return loadScript(head,script);}else{script.text=options.text;return runScript(head,script);}}function runScript(head,script){head.appendChild(script);return Promise.resolve(script);}function loadScript(head,script){return new Promise(function(resolve){var done=false;script.onload=script.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){done=true;script.onload=script.onreadystatechange=null;if(head&&script.parentNode){head.removeChild(script);}resolve(script);}};head.appendChild(script);});}var promiseLoadJS=function(items){return items instanceof Array?Promise.all(items.map(exec)):exec(items);};("undefined"!==typeof window?window:this).promiseLoadJS=promiseLoadJS;}());	;(function(){var ajaxLoadTriggerJS=function(u,f,e){var w=window,x=w.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");x.overrideMimeType("application/javascript;charset=utf-8");x.open("GET",u,!0);x.withCredentials=!1;x.onreadystatechange=function(){if(x.status=="404"){if(e&&"function"===typeof e){e();}console.log("Error XMLHttpRequest-ing file",x.status);return!1;}else if(x.readyState==4&&x.status==200&&x.responseText){try{var Fn=Function;new Fn(""+x.responseText).call("undefined"===typeof window?"undefined"===typeof self?"undefined"===typeof global?this:global:self:window);}catch(m){throw new Error("Error evaluating file. "+m);}if(f&&"function"===typeof f){f(x.responseText);}}};x.send(null);};("undefined"!==typeof window?window:this).ajaxLoadTriggerJS=ajaxLoadTriggerJS;}());	;(function(){var loadJS=function(_src,callback){"use strict";var ref=document.getElementsByTagName("script")[0];var script=document.createElement("script");script.src=_src;script.async=true;ref.parentNode.insertBefore(script,ref);if(callback&&"function"===typeof callback){script.onload=callback;}return script;};("undefined"!==typeof window?window:this).loadJS=loadJS;}());	;(function(){var loadCSS=function(_href,callback,media,before){"use strict";var doc=document;var ss=doc.createElement("link");var ref;if(before){ref=before;}else{var refs=(doc.body||doc.getElementsByTagName("head")[0]).childNodes;ref=refs[refs.length-1];}var sheets=doc.styleSheets;ss.rel="stylesheet";ss.href=_href;ss.media="only x";if(callback&&"function"===typeof callback){ss.onload=callback;}function ready(cb){if(doc.body){return cb();}setTimeout(function(){ready(cb);});}ready(function(){ref.parentNode.insertBefore(ss,(before?ref:ref.nextSibling));});var onloadcssdefined=function(cb){var resolvedHref=ss.href;var i=sheets.length;while(i--){if(sheets[i].href===resolvedHref){return cb();}}setTimeout(function(){onloadcssdefined(cb);});};function loadCB(){if(ss.addEventListener){ss.removeEventListener("load",loadCB);}ss.media=media||"all";}if(ss.addEventListener){ss.addEventListener("load",loadCB);}ss.onloadcssdefined=onloadcssdefined;onloadcssdefined(loadCB);return ss;};("undefined"!==typeof window?window:this).loadCSS=loadCSS;}());	loadCSS("//fonts.googleapis.com/css?family=Open+Sans:300,400&subset=cyrillic",	loadCSS("//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"));	</script>	<script>
/*! * replace img src with data-src * @param {Object} [ctx] context HTML Element */
var manageDataSrcImg = function (ctx) {	"use strict";	ctx = ctx || "";	var w = window,	d = document,	cls = "img[data-src]",	a = ctx ? ctx.querySelector(cls) || "" : d.querySelector(cls) || "",	ds = "dataset",	pN = "parentNode",	g = function (e) {	var p = e[ds].src || "";	if (p) {	if (w.lzld) {	lzld(e);	} else {	e.src = e[ds].src;	}	}	};	if (a) {	console.log("triggered function: manageDataSrcImg");	a = ctx ? ctx.querySelectorAll(cls) || "" : d.querySelectorAll(cls) || "";	if (w._) {	_.each(a, g);	} else if (w.forEach) {	forEach(a, g, !1);	} else {	for (var i = 0, l = a.length; i < l; i += 1) {	g(a[i]);	}	}	}
},
loadManageDataSrcImg = function () {	"use strict";	var w = window,	js = "//cdnjs.cloudflare.com/ajax/libs/lazyloadjs/3.2.2/lazyload.min.js";	if (w.XMLHttpRequest || w.ActiveXObject) {	if (w.Promise) {	promiseLoadJS(js).then(manageDataSrcImg.bind(null, ""));	} else {	ajaxLoadTriggerJS(js, manageDataSrcImg.bind(null, ""));	}	} else {	loadJS(js, manageDataSrcImg.bind(null, ""));	}
};
window.addEventListener("load", loadManageDataSrcImg);
/*! * init masonry */
var initMasonry = function (ctx) {	"use strict";	ctx = ctx || "";	var w = window,	d = document,	cls = ".masonry-grid",	h = ".masonry-grid-item",	k = ".masonry-grid-sizer",	a = ctx ? ctx.querySelector(cls) || "" : d.querySelector(cls) || "",	c = ctx ? ctx.querySelector(h) || "" : d.querySelector(h) || "",	cls1 = ".holder-filter-buttons",	holder_btns = ctx ? ctx.querySelector(cls1) || "" : d.querySelector(cls1) || "",	cls2 = ".holder-filter-buttons button[data-filter]",	btn = ctx ? ctx.querySelector(cls2) || "" : d.querySelector(cls2) || "",	btns = ctx ? ctx.querySelectorAll(cls2) || "" : d.querySelectorAll(cls2) || "",	cls3 = ".holder-filter-select",	holder_sel = ctx ? ctx.querySelector(cls3) || "" : d.querySelector(cls3) || "",	cls4 = ".filter-select",	sel = ctx ? ctx.querySelector(cls4) || "" : d.querySelector(cls4) || "",	cls5 = ".holder-filter-controls",	holder_controls = ctx ? ctx.querySelector(cls5) || "" : d.querySelector(cls5) || "",	g = function () {	clearTimeout(st);	var imgLoad;	if (w.Masonry && w.Isotope) {	var iso = new Isotope(a, {	itemSelector: h,	layoutMode: "masonry",	masonry: {	columnWidth: k,	gutter: 0	},	percentPosition: !0,	});	console.log("function initMasonry => initialised iso");	if (w.imagesLoaded) {	imgLoad = imagesLoaded(a);	imgLoad.on("progress", function (instance) {	iso.layout();	console.log("function initMasonry => reinitialised iso");	});	}	var h_btns = function (e) {	iso.arrange({	filter: e.dataset.filter	});	for (var i = 0, l = btns.length; i < l; i += 1) {	btns[i].classList.remove("is-active");	}	e.classList.add("is-active");	for (var j = 0, m = sel.options.length; j < m; j += 1) {	if (sel.options[j].value === e.dataset.filter) {	sel.selectedIndex = j;	break;	}	}	};	if (btn) {	for (var i = 0, l = btns.length; i < l; i += 1) {	btns[i].onclick = h_btns.bind(null, btns[i]);	}	}	var h_sel = function (e) {	iso.arrange({	filter: e.options[e.selectedIndex].value	});	for (var i = 0, l = btns.length; i < l; i += 1) {	btns[i].classList.remove("is-active");	}	for (var j = 0, m = btns.length; j < m; j += 1) {	if (btns[j].dataset.filter === e.options[e.selectedIndex].value) {	btns[j].classList.add("is-active");	break;	}	}	};	if (sel) {	sel.onchange = h_sel.bind(null, sel);	}	if (holder_controls) {	holder_controls.classList.add("visible");	}	} else if (w.Masonry) {	var msnry = new Masonry(a, {	itemSelector: h,	columnWidth: k,	gutter: 0,	percentPosition: !0	});	console.log("function initMasonry => initialised msnry");	if (w.imagesLoaded) {	imgLoad = imagesLoaded(a);	imgLoad.on("progress", function (instance) {	msnry.layout();	console.log("function initMasonry => reinitialised msnry");	});	}	if (holder_controls) {	holder_controls.classList.remove("visible");	}	} else if (w.Packery) {	var pckry = new Packery(a, {	itemSelector: h,	columnWidth: k,	gutter: 0,	percentPosition: !0	});	console.log("function initMasonry => initialised pckry");	if (w.imagesLoaded) {	imgLoad = imagesLoaded(a);	imgLoad.on("progress", function (instance) {	pckry.layout();	console.log("function initMasonry => reinitialised pckry");	});	}	if (c) {	c = ctx ? ctx.querySelectorAll(h) || "" : d.querySelectorAll(h) || "";	if (w.Draggabilly) {	var draggie,	f = function (e) {	var draggableElem = e;	draggie = new Draggabilly(draggableElem, {});	draggies.push(draggie);	console.log("function initMasonry => initialised draggie");	},	draggies = [];	if (w._) {	_.each(c, f);	} else if (w.forEach) {	forEach(c, f, !1);	} else {	for (var j = 0, m = c.length; j < m; j += 1) {	f(c[j]);	}	}	if (pckry && draggie) {	pckry.bindDraggabillyEvents(draggie);	console.log("function initMasonry => binded draggie to pckry");	}	}	}	if (holder_controls) {	holder_controls.classList.remove("visible");	}	} else {	console.log("function initMasonry => no lib included");	}	};	var st = setTimeout(g, 100);
},
loadInitMasonry = function () {	"use strict";	var w = window,	js1 = "//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js",	js2 = "//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js",	js3 = "//cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js",	js4 = "//cdnjs.cloudflare.com/ajax/libs/draggabilly/2.1.1/draggabilly.pkgd.min.js",	js5 = "//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.min.js";	if (w.XMLHttpRequest || w.ActiveXObject) {	if (w.Promise) {	/* promiseLoadJS(js1)	.then(promiseLoadJS(js2))	.then(initMasonry.bind(null, "")); */	/* promiseLoadJS(js3)	.then(promiseLoadJS(js2))	.then(initMasonry.bind(null, "")); */	/* promiseLoadJS(js3)	.then(promiseLoadJS(js2))	.then(promiseLoadJS(js4))	.then(initMasonry.bind(null, "")); */	promiseLoadJS(js5)	.then(promiseLoadJS(js2))	.then(initMasonry.bind(null, ""));	} else {	/* ajaxLoadTriggerJS(js1,	ajaxLoadTriggerJS(js2, initMasonry.bind(null, ""))); */	/* ajaxLoadTriggerJS(js3,	ajaxLoadTriggerJS(js2, initMasonry.bind(null, ""))); */	/* ajaxLoadTriggerJS(js3,	ajaxLoadTriggerJS(js2,	ajaxLoadTriggerJS(js4, initMasonry.bind(null, "")))); */	ajaxLoadTriggerJS(js5,	ajaxLoadTriggerJS(js2, initMasonry.bind(null, "")));	}	} else {	/* loadJS(js1,	loadJS(js2, initMasonry.bind(null, ""))); */	/* loadJS(js3,	loadJS(js2, initMasonry.bind(null, ""))); */	/* loadJS(js3,	loadJS(js2,	loadJS(js4, initMasonry.bind(null, "")))); */	loadJS(js5,	loadJS(js2, initMasonry.bind(null, "")));	}
};
window.addEventListener("load", loadInitMasonry);
/*! * show page, finish ToProgress */
var showPageFinishProgress = function () {	"use strict";	var d = document,	a = d.querySelector("#container") || "",	g = function () {	a.style.opacity = 1;	},	k = function () {	var si = setInterval(function () {	console.log("function showPageFinishProgress => started Interval");	if (imagesPreloaded) {	clearInterval(si);	console.log("function showPageFinishProgress => si=" + si + "; imagesPreloaded=" + imagesPreloaded);	g();	}	}, 100);	};	if (a) {	console.log("triggered function: showPageFinishProgress");	if ("undefined" !== typeof imagesPreloaded) {	k();	} else {	g();	}	}
};
window.addEventListener("load", showPageFinishProgress);	</script>
</body>
</html>
Masonry/Packery/Isotope layout - Script Codes
Masonry/Packery/Isotope layout - Script Codes
Home Page Home
Developer Englishextra
Username englishextra
Uploaded January 17, 2023
Rating 3
Size 9,966 Kb
Views 6,072
Do you need developer help for Masonry/Packery/Isotope layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Englishextra (englishextra) Script Codes
Name
Parallax.js
Ready-to-Go Three-columns Responsive Typography Template with Off-Canvas Navigation
Responsive Flexbox Administration
Blog Article Template
Typeboost.css
A Pen by englishextra
Timeline Blueprint
QR code generating with vanilla js
Core.css
Grid 2 Go
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!