Fork me on GitHub

Mosaic Flow

Pinterest like responsive image grid for jQuery that doesn’t suck

It allows you to do stuff like this. Try to shrink you browser. It’s responsive and amazingly fast!

Dessi the Dachshund

Tsiri on Baltic Sea

Ciyar the Saluki

Tsiri Having Fun by the Sea

Dessi Meets the Sea

Tsiri the Saluki

Dessi on a Waterfall

Dessi in Dandelion Field

New Year Postcard from Tsiri and Ciyar

Beautiful Afghan Hound Girl

Running Ciyar and Afgan Girl

Dessi Walking on a Sea Shore

Download Mosaic Flow or view source on GitHub

How to use:

<style>
.mosaicflow__column {
	float:left;
	}
.mosaicflow__item img {
	display:block;
	width:100%;
	height:auto;
	}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.mosaicflow.min.js"></script>

<div class="clearfix mosaicflow">
	<div class="mosaicflow__item">
		<img width="500" height="300" src="1.jpg" alt="">
	</div>
	<div class="mosaicflow__item">
		<img width="500" height="500" src="2.jpg" alt="">
	</div>
	…
</div>

See more examples and all available options in documentation.

GitHub