Responsive Masonry + Filter (isotope) + Infinite Scroll + Effect

index.html

<h1>Infinite Responsive Grid (Masonry/Isotope) + Reveal animation</h1>
<h2>Using Animate.css & WOW.js</h2>
<h3><a href="http://tympanus.net/Development/GridLoadingEffects/index2.html" rel="nofollow">(Inspired from a Tymphanus Codrops Article)</a></h3>
<div id="SlideMiddle">
	<div id="nav">
		<div id="nav-bar">
			<div id="fluid-left"></div>
			<div id="fix-content">
				<div id="nav-bar-filters">
					<div data-f="*" class="filter-item active"><span>All</span></div>
					<div data-f=".c0" class="filter-item"><span>Lorem</span></div>
					<div data-f=".c1" class="filter-item"><span>ipsum</<span></div>
					<div data-f=".c2" class="filter-item"><span>dolor</span></div>
					<div data-f=".c3" class="filter-item"><span>sit</span></div>
					<div data-f=".c4" class="filter-item"><span>amet</span></div>
					<div data-f=".c5" class="filter-item"><span>consectetur</span></div>
					<div data-f=".c6" class="filter-item"><span>adipiscing</span></div>
					<div data-f=".c7" class="filter-item"><span>elit</span></div>
					<div data-f=".c8" class="filter-item"><span>Phasellus</span></div>
				</div>
			</div>
			<div id="fluid-right"></div>
		</div>
	</div>
	<div id="grid">
		<div id="grid-content">
		</div>
	</div>
</div>

responsive-masonry-filter-isotope-infinite-scroll-effect.markdown

Responsive Masonry + Filter (isotope) + Infinite Scroll + Effect

Infinite responsive grid (Masonry/Isotope) and reveal items with animation on scroll (using animate.css). Items can be filtered (isotope)

A Pen by Goji on CodePen.

License.

script.js

var Imgs = [
	'http://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
	'http://tympanus.net/Development/GridLoadingEffects/images/3.jpg',	'https://d13yacurqjgara.cloudfront.net/users/64706/screenshots/1167254/attachments/152315/SUGARSKULL-01.png',
	'http://tympanus.net/Development/GridLoadingEffects/images/8.jpg',
	'http://tympanus.net/Development/GridLoadingEffects/images/10.png',
	'http://tympanus.net/Development/GridLoadingEffects/images/14.png',
	'http://tympanus.net/Development/GridLoadingEffects/images/9.jpg',
	'http://tympanus.net/Development/GridLoadingEffects/images/13.png',
	'http://tympanus.net/Development/GridLoadingEffects/images/12.png',
	'http://tympanus.net/Development/GridLoadingEffects/images/4.jpg',	'http://www.thedrum.com/uploads/news/172673/DzrMPF_DeezerPoster_MusicSoundBetterWithYou_03.jpg'
];

$(document).ready(function(){
	$grid = $('#grid-content');
	
	$.fn.revealItems = function($items){
		
		var iso = this.data('isotope');
		var itemSelector = iso.options.itemSelector;
		$items.hide();
		$(this).append($items);
		$items.imagesLoaded().progress(function(imgLoad, image){
			var $item = $(image.img).parents(itemSelector);
			$item.show();
			iso.appended($item);
		});
	
		return this;
	}
	$grid.isotope({
		containerStyle: null,
		masonry:{
			columnWidth: 300,
			gutter: 15
		},
		itemSelector: '.grid-item',
		filter : '*',
		transitionDuration: '0.4s'
	});

	
	$grid.imagesLoaded().progress(function(){
		$grid.isotope();
	})

	/*$grid.imagesLoaded( function() {
		 $grid.isotope({
			containerStyle: null,
			masonry:{
				columnWidth: 300,
				gutter: 15
			},
			itemSelector: '.grid-item',
			filter : '*',
			transitionDuration: '0.4s'
		});
	});*/
	
	function GenerateItems(){
		var items = '';
		for(var i=0; i < 20; i++){
			items += '<div class="grid-item c'+(i%9)+' wow fadeInUp" ><img src="'+Imgs[i%Imgs.length]+'" /></div>';
		}
		return $(items);
	}

	// SimpleInfiniteScroll
	function Infinite(e){
		if((e.type == 'scroll') || e.type == 'click'){
			var doc = document.documentElement;
			var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
			var bottom = top + $(window).height();
			var docBottom = $(document).height();
			
			if(bottom + 50 >= docBottom){
				$grid.revealItems(GenerateItems());
			}
		}
	}
	
	$grid.revealItems(GenerateItems());
	
	$(document).on('click','.filter-item',function(){
		$('.filter-item.active').removeClass('active');
		$(this).addClass('active');
		var f = $(this).data('f');
		console.log(f);
		$grid.find('.grid-item').removeClass('wow').removeClass('fadeInUp');
		$grid.isotope({filter: f});
		
	})
	
	
	$(window).resize(function(){
		var margin=40;
		var padding=15;
		var columns=0;
		var cWidth=300;
		var windowWidth = $(window).width();

		var overflow = false;
		while(!overflow){
			columns++;
			var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
			if(WidthTheory > windowWidth)
				overflow = true;			
		}		
		if(columns > 1)
			columns--;
		
		var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
		
		if( GridWidth != $('#grid').width()){
			$('#grid').width(GridWidth);
		}
	});
	$(window).scroll(Infinite);
	new WOW().init();

})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

style.less

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic|Poiret+One|Dancing+Script);

@bg-nav: url('https://dl.dropboxusercontent.com/u/76642452/CodePen/nav-background.png') repeat-x;
@end-left: url('https://dl.dropboxusercontent.com/u/76642452/CodePen/left-end.png') no-repeat;
@end-right: url('https://dl.dropboxusercontent.com/u/76642452/CodePen/right-end.png') no-repeat;


img{
	border: 0;
	max-width: 100%;
}


html, body{
	font-family: 'Lato',sans-serif;
	min-height: 100%;
	height: 100%;
	width: 100%;
	background: #ffffff;
}

h1{
	font-family: 'Dancing Script', cursive;
	color: #1E88E5;
	font-size: 2.5em;
	text-align:center;
	-webkit-transition: all .45s;
	-moz-transition: all .45s;
	-o-transition: all .45s;
	transition: all .45s;
	&:hover{
		color: #4DD0E1;
	}
}

h2, h3{
	text-align:center;
	font-family: 'Poiret One', cursive;
	color: #1E88E5;
}

h3 a{
	color: inherit;
}

#SlideMiddle{
	display: block;
	background: #eeeeee;
	width: 100%;
	min-height: 100%;
		
	#nav{
		display: flex;
		height: 71px;
		width: 100%;
		margin: 0 auto;
		
		#nav-bar{
			display: table;
			width: 100%;
			height: 100%;
		}
		
		#fluid-left{
			display: table-cell;
			width: 50%;
			height: 100%;
			background:@bg-nav;
		}
		
		#fix-content{
			display: table-cell;
			width: 960px;
			height: 100%;
			max-width: 960px;
			min-width: 960px;
		}
		
		#nav-bar-filters{
			display: flex;
			width: 100%;
			height: 100%;
			.filter-item{
				cursor: pointer;
				display: flex;
				align-items:center;
				justify-content:center;
				position: relative;
				flex-grow:1;
				height: 100%;
				color: #a2a2a2;
				font-size: 25px;
				text-align:center;
				vertical-align: middle;
				background: @bg-nav;
				&:hover{
					color: #868686;
				}
				&.active{
					color: #868686;
					background: none;
					&:before{
						content: ' ';
						background: @end-left;
						display:block;
						height: 100%;
						position: absolute;
						width: 15px;
						top: 0px;
						left: -8px;
					}
					
					&:after{
						content: ' ';
						background: @end-right;
						display:block;
						height: 100%;
						width: 15px;
						position: absolute;
						top: 0;
						right: -8px;
					}
				}
			}
		}
		
		#fluid-right{
			display: table-cell;
			width: 50%;
			height: 100%;
			background: @bg-nav;
		}
	}
	
	#grid{
		margin: 40px auto;
		width: 960px;
		padding-left: 15px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	@media screen and (min-width: 1315px){
		#grid{
			width: 1275px;
		}
	}
	
	@media screen and (min-width: 1630px){
		#grid{
			width: 1590px;
		}
	}
	
	@media screen and (min-width: 1945px){
		#grid{
			width: 1905px;
		}
	}
	
	@media screen and (min-width: 2260px){
		#grid{
			width: 2220px;
		}
	}
	
	@media screen and (min-width: 2575px){
		#grid{
			width: 2535px;
		}
	}
	
	#grid-content{
		
		position: relative;
		
		.grid-item{
			margin-bottom: 15px;
			background: #F66;
			width: 300px;
		}
	}
}

styles

<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />