Home » Featured » Create Responsive Masonry Layout

Create Responsive Masonry Layout

Masonry layouts are popular and responsive, mostly used for portfolio or blog sites, but you can use it and modify in your own way. Here is how you can create a masonry layout:

feat

Import Java Scripts

Note: Download layout at the bottom of this tutorial – java files are included.

Import the Java Scripts before the closing </head> tag.

<!-- JS -->
<script type="text/javascript" src="js/jquery.masonry.js"></script><script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

And paste this code just under the imported Java Scripts files from above, before the closing </head> tag.

<script type="text/javascript">// <![CDATA[
var $container = $('#container');
$container.imagesLoaded( function()
{
	$container.masonry({
		itemSelector : '.box',
		columnWidth: 100
	});
});
// ]]></script>

The HTML Layout Structure

<div id="container" class="clearfix">

<div class="box col2">
  <img src="images/img.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/1.jpg" width="260" height="250" /> </div><!-- box col2 -->

<div class="box col2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
</div><!-- box col2 -->

<div class="box col2">
  <img src="images/2.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/3.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/img.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/4.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
</div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/1.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/2.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
  <img src="images/3.jpg" width="260" height="250" /> </div><!-- box col2 -->
  
  <div class="box col2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
</div><!-- box col2 -->
  
</div><!-- Container -->

The CSS

#container {
	padding:5px;
	margin-bottom:20px;
	clear:both;
}

.box {
	margin:5px;
	padding:5px;
	/*background:#D8D5D2;*/
	font-size:12px;
	line-height:18px;
	float:left;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	font-family:Arial, Helvetica, sans-serif;
}

.box img {
	display:block;
	width:100%;
}
.col1 { width:180px; }
.col2 { width:280px; }
.col3 { width:380px; }
clearfix:before, clearfix:after {
	content: ""; display:table;
}
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

See Layout Demo And Download Project

Download Layout Layout Demo

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

cankaya escort
Scroll To Top