Advertisement
Html/Css/Jquery

Membuat Pinterest Layout Dengan Jquery Masonry Plugin – Pinterest Part 1

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.

Agar tidak terlalu panjang lebar, sesuai judul membuat pinterest layout dengan jquery masonry plugin, kita langsung saja ke pembahasannya.

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

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

5 Responses to Membuat Pinterest Layout Dengan Jquery Masonry Plugin – Pinterest Part 1

  1. Mas, aku udh coba dan berjalan dengan lancar, tp ada sedikit masalah, saya bingung krn ketika loading pertama itu semua tampilan gambarnya 100%, jadi kaya berantakan gitu, gimana ya caranya biar layoutnya dulu aja yg loading duluan, gambarnya belakangan, mohon bantuannya

    • Berbagi Yuks Team Berbagi Yuks Team

      coba pada .post (class post) diisi width sizenya. Misal,

      .post{
      width:200px;
       border:5px solid #eaeaea;
       margin-top:10px;
      }
  2. Wah terima kasih mas atas responnya, saya sudah coba dan memang betul tidak 100% lebarnya tetapi tetap load gambar dulu, kebetulan kan gambarnya saya banyak ada sekitar 20 gambar yang dijadikan grid, jadi maksud saya bisa gak ya jangan load gambar tetapi load data saja biar tidak lama loadingnya, baru gambarnya tampil belakangan. bisa gak ya mas? hehe mohon pencerahannya

  3. Sore mas, saya sudah coba dan berhasil, tapi saya bingung kalau ditambah loadmore gimana caranya? makasih 🙂

  4. Mas saya masih belajar blog dan bagaimana cara menerapkan pada template blogger ? Mohon diberi pencerahan. Thanks

Leave a Reply

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