Simple responsive pinerest style layout using Jquery

Simple pinerest style layout with responsive design, here i'm going to use pinterest query plugin to use this kind of effect, this one is simple and effective design for web page. here we are mingling with bootstrap too. let see the code for this responsive pinterest style layout.

DOWNLOAD LIVE DEMO

HTML CODE

<div class="container">
<section id="posts-landing">


<div class="white-panel"> 
  <img src="images/4.png" alt="ALT">
    <h1><a href="http://www.2my4edge.com/2015/08/simple-way-to-make-
      text-center-to-div.html">Simple way to make text center to the 
      div using css3</a></h1>
    <p>Today i'm going to tell you one small trick to make text center
     in div by vertically and horizontally. here i'm going to make the 
     texts center of the div using css3 transform code. lets see the 
     simple code below.</p>
</div>



<div class="white-panel"> 
  <img src="images/5.jpg" alt="ALT">
    <h1><a href="http://www.2my4edge.com/2015/04/codeigniter-basic-
      structure-to-set.html">Codeigniter basic structure to set Frontend 
       Backend</a></h1>
    <p>CodeIgniter is an open source rapid development web application 
      framework, for use in building dynamic web sites with PHP. CodeIgniter 
      is loosely based on the popular Model-View-Controller development 
      pattern.</p>
</div>



<div class="white-panel"> 
  <img src="images/6.jpg" alt="ALT">
    <h1><a href="http://www.2my4edge.com/2015/11/copyright-content-text-and-
      webpage-url.html">Copyright content text and webpage url while copying 
      data in webpage</a></h1>
    <p>Here i'm going to tell you one of most interesting and simple script to 
      make our web page url and content copyright text while copying data from 
      our web page. this is one of the simple and useful technique to make our 
      site spread while copying our data form our site.</p>
</div>



<div class="white-panel"> 
  <img src="images/7.png" alt="ALT">
    <h1><a href="http://www.2my4edge.com/2015/06/responsive-fancy-style-sidebar-
      menu.html">Responsive fancy style sidebar menu</a></h1>
    <p>Here i'm going to tell you that simple side bar navigation menu with dropdown 
      feature in fancy style, now a days all the websites are coming with response 
      design so here i'm going to tell that fancy style responsive navigation menu 
      like hide show style. i hope you really like this tutorial. lets see the 
      coding.</p>
</div>




<div class="white-panel"> 
  <img src="images/8.png" alt="ALT">
    <h1><a href="http://www.2my4edge.com/2015/05/very-flexible-hover-css-effects-
      using.html">Very flexible Hover css effects using Hover.css</a></h1>
    <p>I was used this css to my recent project, This is really nice and time consumes 
      for css hover effects. Here it is very simple we just have to give to class name 
      in the class and it will automatically takes that realted effect. this is very 
      simple for hover effects. let me tell the details about the hover.css. </p>
</div>



</section>
</div>

Keep the code like the above, and add the scripts and css as like the below.

CSS AND JQUERY SCRIPTS

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body {
background: #E9E9E9;
}
#posts-landing {
margin-top: 50px;
position: relative;
max-width: 100%;
width: 100%;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="pinterest_grid.js"></script> 
<script>
    $(document).ready(function() {
        $('#posts-landing').pinterest_grid({
            no_columns: 4,
            padding_x: 10,
            padding_y: 10,
            margin_bottom: 50,
            single_column_breakpoint: 700
        });
    });
</script>