Masonry Test - using Isotope Filtering
HTML
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<div class="container">
<div id="grid">
<img src="http://placehold.it/200x50" class="item one all" />
<img src="http://placehold.it/200x70" class="item two all" />
<img src="http://placehold.it/200x100" class="item three all" />
<img src="http://placehold.it/200x60" class="item one all" />
<img src="http://placehold.it/200x50" class="item one all" />
<img src="http://placehold.it/200x40" class="item two all" />
<img src="http://placehold.it/200x120" class="item three all" />
<img src="http://placehold.it/200x75" class="item three all" />
<img src="http://placehold.it/200x100" class="item two all" />
<img src="http://placehold.it/200x50" class="item two all" />
<img src="http://placehold.it/200x40" class="item one all" />
</div>
</div>
<!-- #container -->
CSS
* {
box-sizing: border-box;
}
.container {
width: 320px;
padding: 0 0px;
/* padding: 10px; */
}
.grid {
width: 100%;
}
.item {
width: 50%;
padding: 10px 5px;
/* margin-bottom:10px; */
}
JavaScript
$( function() {
// init Isotope
var $container = $('.grid').isotope({
itemSelector: '.item',
masonry: {
/* gutter: 10 */
}
});
});