ทำเว็บสไตล์ Pinterest ง่าย ๆ ด้วย Masonry

ใครที่เคยเข้าเว็บ Pinterest.com เพื่อหาดูไอเดียต่าง ๆ จะเห็นได้ว่า Pinterest เป็นเว็บที่มีการแสดงข้อมูลรูปภาพที่มีเอกลักษณ์มาก โดยรูปภาพในเว็บจะถูกแสดงซ้อน ๆ กันหลายรูป  การแสดงผลแบบนี้มีชื่อเรียกว่า staggered grid

บทความนี้ผมพามาลุย workshop พาทำเว็บสไตล์ Pinterest อย่างง่าย ๆ ด้วย javascript library ที่ชื่อว่า Masonry ซึ่งเป็น js library ใช้ทำ staggerted grid ที่ดังที่สุด สิ่งที่คุณต้องมีความรู้พื้นฐานในบทความนี้ คือ HTML, CSS และ Javascript ครับ

ไฟล์ที่จำเป็นต้องใช้ คือ masonry.​pkgd.​min.js ให้คุณไปดาวน์โหลดมา จากนั้นให้นำไฟล์ดังกล่าวไปไว้ใน Folder เว็บที่คุณสร้างขึ้น เสร็จแล้วให้สร้างไฟล์ index.html ขึ้นมา โดยโครงสร้างไฟล์ทั้งหมดหน้าตาประมาณนี้

ทำเว็บสไตล์ Pinterest ง่าย ๆ ด้วย Masonryจากนั้นเปิดไฟล์ index.html เพื่อเขียน code โดยผมแนะนำให้ใช้ Sublime Text 2 เป็น text editor ลองหาดาวน์โหลดกันมาได้

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <style type="text/css">
   body {
     background: #EEE;
   }

   img {
     margin-bottom: 10px;
     max-width: 200px;
   }

   .item {
     width: 200px;
     margin: 10px;
     padding: 10px;
     background: #FFF;
   }
 </style>
</head>
<body>
 <div id="container">
   <div class="item"><img src="images/img-01.jpg">Title</div>
   <div class="item"><img src="images/img-02.jpg">Title</div>
   <div class="item"><img src="images/img-03.jpg">Title</div>
   <div class="item"><img src="images/img-04.jpg">Title</div>
   <div class="item"><img src="images/img-05.jpg">Title</div>
   <div class="item"><img src="images/img-06.jpg">Title</div>
   <div class="item"><img src="images/img-07.jpg">Title</div>
   <div class="item"><img src="images/img-08.jpg">Title</div>
   <div class="item"><img src="images/img-09.jpg">Title</div>
   <div class="item"><img src="images/img-10.jpg">Title</div>
   <div class="item"><img src="images/img-11.jpg">Title</div>
   <div class="item"><img src="images/img-12.jpg">Title</div>
 </div>
 <script src="masonry.pkgd.min.js"></script>
 <script type="text/javascript">
   var container = document.querySelector('#container');
   var masonry = new Masonry(container, {
     columnWidth: 240,
     itemSelector: '.item'
   });
 </script>
</body>
</html>

ผลลัพธ์

ใครที่ทำแล้วได้เว็บหน้าตาแบบนี้ถือว่าใช้ได้ ลอง zoom-in zoom-out หรือย่อหด web browser ดูตัว grid จะมีการปรับขนาด column ให้เราอัตโนมัติ ครับ

ทำเว็บสไตล์ Pinterest ง่าย ๆ ด้วย Masonry

อธิบายการทำงานของ Code

เริ่มที่ css นะครับ body กับ img ไม่มีอะไรมาก ตัวที่สำคัญคือ class ที่ชื่อว่า item ใช้กำหนดการแสดงผลของ item ซึ่งถูกใช้ในคำสั่ง javascript ของ Masonry เดี๋ยวอธิบายใน code ส่วน Javascript ท้ายสุดนะครับ


body {
  background: #EEE; /*กำหนดสีพื้นหลัง*/
}

img {
  margin-bottom: 10px; /*ระยะห่างขอบล่าง*/
  max-width: 200px; /*ความกว้างสูงสุดของรูป อิงกับ class item*/
}

.item { /*class item ถูกนำไปใช้กับ itemSelector ของ Masonry*/
 width: 200px;
 margin: 10px;
 padding: 10px;
 background: #FFF;
}

ถัดมา คือ code html ให้มาดูที่ส่วนของ div ครับ หลัก ๆ เลย คือ <div id=”container”> จะเป็น element ที่ใช้บอกว่า นี่คือพื้นที่การแสดงผลแบบ staggered grid (นึกถึงตู้คอนเทนเนอร์) ดังนั้น element (item หรือของ) ที่ยัดเข้าไปใน container ทั้งหมดจะถูกสั่งให้แสดงผลแบบ staggered grid โดยอัตโนมัติ ซึ่งก็คือ <div class=”item”>…</div> นั่นเอง


<div id="container">
   <div class="item"><img src="images/img-01.jpg">Title</div>
   <div class="item"><img src="images/img-02.jpg">Title</div>
   <div class="item"><img src="images/img-03.jpg">Title</div>
 ...
<div>

สุดท้าย คือ code ชุดคำสั่ง Javascript ของ Masonry หากขาดส่วนนี้ไป การแสดงผลแบบ Staggered Grid จะไม่มีทางเกิดขึ้นได้เลยครับ

<script src="masonry.pkgd.min.js"></script> <!--include Masonry-->
<script type="text/javascript">
  var container = document.querySelector('#container'); //ประกาศตัวแปร container อ้างถึง container element เพื่อใช้เป็นพื้นที่สำหรับแสดงผล staggered grid
  var masonry = new Masonry(container, {
    columnWidth: 240,
    itemSelector: '.item'
  }); //ประกาศสร้าง instance Mansonry โดยส่งค่า arguments 2 ค่า คือ
      //1) ตัวแปร container
      //2) Options ใช้ในการคุม grid มีหลายค่า แต่มี 2 ค่าที่ผู้พัฒนาแนะนำให้ใส่ คือ
      //columnWidth (ความกว้างของ grid ในแนวนอน)
      //itemSelector (ใช้บอกว่า element ตัวไหนถูก set ให้เป็น item ใน container บ้าง ในตัวอย่างนี้คือ <div class="item">...</div>)
</script>

ในเรื่องของ Options ที่ใช้ควบคุม grid ยังมีอีกหลายตัว ใครสนใจเข้าไปดูได้ที่ http://masonry.desandro.com/options.html

สรุป

Masonry เป็น js library อีกตัวหนึ่งที่ช่วยให้ชีวิตนักพัฒนาเว็บง่ายขึ้นมากในการทำเว็บสไตล์ Pinterest ที่เป็น staggered grid ต่างจาก Bootstrap ที่ grid 1 แถวจะมีความสูงเท่ากันหมดอิงโดยอิงจาก content ที่สูงที่สุด การปรับแต่ง Bootstrap ให้เป็น staggered grid เท่าที่ผมดูจากเว็บเมืองนอก จะต้องไปยุ่งกับการเขียน CSS เพิ่มพอสมควรครับ บทความนี้สอน basic การใช้ Masonry ใครที่จะเอาไปปรับแต่งให้สวยงามหรือต่อยอดทำเป็น Dynamic content ก็ตามสะดวกครับ

สำหรับใครที่ต้องการตัวอย่าง workshop ในบทความนี้สามารถดาวน์โหลดกันได้ที่ Google Drive

ปล. ใครที่ลองเปลี่ยนรูปจาก Folder images ไปใช้รูปจากอินเทอร์เน็ตแทน จะเจอปัญหาแสดงผลเพี้ยนตอนเริ่มโหลดเว็บ บทความหน้าผมจะมาพูดถึงวิธีแก้ไขปัญหานี้ครับ รอติดตามกันได้เลย

Comments

comments