Super Simple jQuery Pinterest-Style Grid Layout - Boxify.js

Boxify.js is a super lightweight (~1kb minified) and easy jQuery plugin to implement a pinterest-style fluid grid layout on your website.

Features:

• Custom Global Styling: Various style properties can be passed in to the boxify constructor to allow you to easily control the appearance.
• Each box by default is 200px wide with 10px padding on each side.
• The height of each box is determined by its content - the height of the image and the height of the text. For the best results you should aim to keep your image heights proportional to the line heights of the text.
• data-* attributes can be added to each box to give it its own style.

Basic Usage:

1. Load the jQuery javascript library and Boxify.js script at the end of your page.

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

2. Markup html structure.

<section id="boxy">

<figure> <img src="1.jpg"/>
<figcaption>
<h4>Box 1</h4>
<p>...</p>
</figcaption>
</figure>

<figure> <img src="2.jpg"/>
<figcaption>
<h4>Box 2</h4>
<p>...</p>
</figcaption>
</figure>

...

</section>

3. The CSS to style the grid layout.

html, body {
background: #e7e7e7;
font: 16px/20px Helvetica, Arial, sans-serif;
margin: 0;
}
a {
color: #000;
font-weight: bold;
text-decoration: none;
}
figure a, figure img, figure figcaption {
display: block;
}
figure figcaption a {
display: inline;
}
figure figcaption {
font-size: 16px;
}
figure figcaption:first-child {
margin: 0 0 4px 0;
}
figure figcaption:last-child {
margin: 4px 0 0 0;
}
figure a:first-child:last-child, figure img:first-child:last-child, figure figcaption:first-child:last-child {
margin: 2px 0;
}
figure a, figure img, figure figcaption h1, figure figcaption h2, figure figcaption h3, figure figcaption h4, figure figcaption p {
margin: 0;
}
figure figcaption h1 {
font-size: 34px;
line-height: 40px;
text-align: center;
}
figure figcaption h2 {
font-size: 24px;
line-height: 40px;
}
figure figcaption h3 {
font-size: 18px;
line-height: 20px;
}
figure figcaption h4, figure figcaption p {
font-size: 14px;
line-height: 20px;
}

4. Initialize the plugin with available options.

<script type="text/javascript">
$(window).load(function() {
$('#boxy').boxify({
width: "200px",
background: "#fff",
bordercolor: "#bbb",
color: "#444",
margin: "10px",
padding: "10px"
});
});
</script>

5. Individual Box Styling

<figure data-background="#fff" data-color="#444" data-border-color="#bbb">
    ...
</figure>

---

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