jQuery Masonry Image Gallery

Gallery

jQuery Masonry Image Gallery



<div class="container">
	<div class="sort-source" data-column-sorting="columns" data-plugin-options='{"layoutMasonry": "masonry": "*"}'>
		<div class="masonry-destination" data-column-sorting="columns">
			<ul class="row" id="flexgallery">                
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>          
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>
				<li class="col-xs-12 col-sm-6 col-md-3 masonry-column" data-responsive="#" data-src="#" data-html="<h3>Image Gallery</h3><p>Responsive Flexbox Image Gallery</p>">
					<a href="">
						<img class="img-responsive img-gallery" src="#" alt="...">
            		</a>
				</li>
			</ul>
		</div>
	</div>
</div>