Membuat Pinterest Layout Dengan Jquery Masonry Plugin – Pinterest Part 1

by I Wayan Widyana

Saat ini banyak sekali website yang mengikuti style pinterest layout , google plus, facebook atau website besar lainnya hampir semuanya menggunakan layout mirip dengan pinterest, meski ada beberapa perbedaan. Layout bergaya pinterest ini berasa menjadi popular saat ini, bahkan banyak jquery plugin dibuat oleh para web developer untuk mempermudah web designernya membuat layout seperti itu.

Misalnya saja jquery plugin masonry ini. Dengan menggunakan plugin ini kamu akan dipermudah membuat pinterest layout tanpa harus membuat ratusan baris kode jquery untuk membentuk fungsi-fungsi yang berkaitan layout seperti ini.

Pinterest Layout – Step 1.

Download plugin jquery dan masonray dulu.

Kemudian buat file htmlnya,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pinterest Layout With Masonry Plugin</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="container">
<h1>Pinterest Layout With Masonry Plugin</h1>
<div class="sort">

<div class="post">
<img src="img/3318887645_1f33364338.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/3319714470_c05a5cb5a8_m.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186007969_9WFdQzoE_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008036_CrR9zwaB_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008082_1mKh4t1T_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008079_v0nFy38q_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008082_1mKh4t1T_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008083_dwdkdZ80_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008573_Bkj8FMt0_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008573_Bkj8FMt0_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186008692_HKqV9Rq8_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/9499849186009076_uFQ2ZyW4_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/44613852530578132_LObe9FDR_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/44613852530578140_lPC8AVRL_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/84090718014272425_lFzHmbfu_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/88946161362560792_T1J61SRr_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/115334440429167280_yS224zPy_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

<div class="post">
<img src="img/115334440429167410_Zz7jqH3s_b.jpg" alt="Pinterest Layout With Masonray Plugin" />
</div>

</div>
</div>
</body>
</html>

Pinterest Layout – Step 2.

Buat file style.css dan copy code berikutnya


#container {
 width:85%;
 margin:auto;
}
#container h1{
 font-family:Tahoma, Geneva, sans-serif;
 font-weight:600;
 text-align:center;
}
.sort {
 padding:5px;
 }
.post {
 border:5px solid #eaeaea;
 margin-top:10px;
}
/*untuk responsive image*/
.post img {
 width:100%;
 height:auto;
}

Pinterest Layout – Step 3.

Buat file js dengan nama script.js. Ini merupakan script yang akan membuat fungsi-fungsi plugin tersebut bisa berjalan


$(document).ready(function(){
 //class dimana semua loop konten anda berada didalamnya
 var $container = $('.sort');
 //untuk menentukan padding rightnya atau rongga batas kolom
 var gutter = 20;
 //lebar kolom yang otomatis akan menentukan jumlah kolom yang akan di tampilkan
 var min_width = 200;
 $container.imagesLoaded( function(){
 $container.masonry({
 //class untuk bagian dimana konten anda di tempatkan biasanya dibuat dengan class post
 itemSelector : '.post',
 gutterWidth: gutter,
 isAnimated: true,
 columnWidth: function( containerWidth ) {
 var num_of_boxes = (containerWidth/min_width | 0);
 var box_width = (((containerWidth - (num_of_boxes-1)*gutter)/num_of_boxes) | 0) ;
 if (containerWidth < min_width) {
 box_width = containerWidth;
 }
 $('.post').width(box_width);
 return box_width;
 }
 });
 });
});

Setelah semuanya selesai, simpan file-file tersebut dalam satu folder.

Pada code dibawah, kamu bisa menganti url directory tempat kamu menaruh file js dan css template website kamu. Misalnya pada href=”style.css” kamu bisa mengubahnya menjadi href=”[nama foldermu]/style.css”


<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Sekian dulu, jika ada pertanyaan silahkan tinggalkan di comment box atau kirim email melalui kontak kami.

Download Code Demo