Fluid & Ajax-enabled jQuery Pinterest Style Grid Layout

Just another fluid, responsive and ajax-enabled pinterest-like grid layout built on top of jQuery javascript library and CSS3.

Related Plugins:

• Pinterest Like Glowing Input Fields with CSS3
• Yet Another Pinterest Like Layout Plugin For jQuery - waterfall
• Pinterest-Like Dynamic & Responsive Grid Layout Plugin - BlocksIt
• Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
• Pinterest-Like Web Layout Plugin
• Pinterest Style Dynamic Layout jQuery Plugin - Masonry
• Simple Pinterest Like Grid Layout Plugin - Pinbox
• Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu
• Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow

Basic Usage:

1. Markup html structure.

<div class="caixa">
<div class="coluna1">
<div class="coluna2">
<div class="coluna4">
<div class="coluna8">
<div class="bloco"> <img src="1.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
<div class="coluna8">
<div class="bloco"> <img src="2.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
</div>
<div class="coluna4">
<div class="coluna8">
<div class="bloco"> <img src="3.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
<div class="coluna8">
<div class="bloco"> <img src="4.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
</div>
</div>
<div class="coluna2">
<div class="coluna4">
<div class="coluna8">
<div class="bloco"> <img src="5.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
<div class="coluna8">
<div class="bloco"> <img src="6.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
</div>
<div class="coluna4">
<div class="coluna8">
<div class="bloco"> <img src="7.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
<div class="coluna8">
<div class="bloco"> <img src="8.jpg">
<div>Description</div>
</div>
<div class="insert"></div>
</div>
</div>
</div>
</div>
<div id="carregar">Load more</div>
</div>

2. The CSS to style the grid layout.

body {
margin: 0;
padding: 0;
background: #f0f0f0
}
img {
border: none
}
.caixa {
max-width: 2400px;
width: 95%;
min-width: 240px;
margin: 0 auto
}
.bloco {
background: #fff;
float: left;
width: 96%;
margin: 2%;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.bloco:hover {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.bloco img {
width: 100%;
float: left;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bloco div {
width: 96%;
padding: 2%;
font-size: 18px;
color: #666;
font-family: 'Exo 2', sans-serif;
float: left;
}
.coluna1, .coluna2, .coluna4, .coluna8 {
width: 100%;
float: left;
}
#carregar {
width: 52%;
margin: 20px 20%;
padding: 2%;
float: left;
background: #09c;
color: #fff;
text-align: center;
font-family: 'Exo 2', sans-serif;
font-size: 18px;
transition: all 0.3s;
}
#carregar:hover {
-moz-box-shadow: inset 0 0 8px -2px #000;
-webkit-box-shadow: inset 0 0 8px -2px #000;
box-shadow: inset 0 0 8px -2px #000;
cursor: pointer;
}

@media screen and (min-width : 240px) {
.coluna1 {
width: 100%;
float: left;
}
}
@media screen and (min-width : 640px) {
.coluna2 {
width: 50%;
float: left;
}
}
@media screen and (min-width : 1100px) {
.coluna2 {
width: auto;
float: none;
}
.coluna4 {
width: 25%;
float: left;
}
}
@media screen and (min-width : 2560px) {
.coluna2, .coluna4 {
width: auto;
float: none;
}
.coluna8 {
width: 12.5%;
float: left;
}
}

3. Include the jQuery library in the html document.

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

4. The javascript.

$(document).ready(function() {
$('#carregar').click(function(){
$.ajax({
url: "ajax.html",
type: 'GET',
success: function(data){
resposta = data.split('<//>');
numero = parseInt( $('.coluna1').width() / $('.bloco').width() );
if(numero == 1){
$('.insert').eq(7).before(resposta);
} else if(numero == 2){
$('.insert').eq(3).before(resposta.slice(0,4));
$('.insert').eq(7).before(resposta.slice(4,8));
} else if(numero == 4){
$('.insert').eq(1).before(resposta.slice(0,2));
$('.insert').eq(3).before(resposta.slice(2,4));
$('.insert').eq(5).before(resposta.slice(4,6));
$('.insert').eq(7).before(resposta.slice(6,8));
} else {
for(i = 0; i < 8; i++ ){
$('.insert').eq(i).before(resposta[i]);
}
}
},
error: function(xhr, thrownError){
alert(xhr.status);
alert(trownError);
}

});
});
});

---

This awesome jQuery plugin is developed by lucasres5. For more Advanced Usages, please check the demo page or visit the official website.