สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
CSS Masonry Layout หรือหลายท่านอาจรู้จักในชื่อ "Pinterest Style Layout" เป็นเทคนิคการออกแบบเว็บไซต์ที่ช่วยจัดวางคอนเทนต์ในรูปแบบกระเบื้องที่ซ้อนกันได้อย่างน่าทึ่ง ด้วยความยืดหยุ่นและความสวยงาม การจัดเรียงแบบนี้สามารถทำให้หน้าเว็บของคุณโดดเด่นและดูทันสมัยขึ้นได้ ในบทความนี้ เราจะเรียนรู้เกี่ยวกับหลักการของ CSS Masonry Layout พร้อมดูตัวอย่างโค้ดและการใช้งานในชีวิตจริง
CSS Masonry Layout เป็นการจัดเรียงองค์ประกอบบนหน้าเว็บโดยที่แต่ละองค์ประกอบสามารถมีความสูงต่างกันได้ ก่อให้เกิดการจัดเรียงที่เหมือนหินเรียงในงานศิลปะ ซึ่งแตกต่างจาก Grid Layout ทั่วไปที่มีแถวหรือคอลัมน์ที่มีขนาดเท่ากันทั้งหมด Masonry Layout ใช้การวางซ้อนอย่างยืดหยุ่นเพื่อใช้พื้นที่ได้อย่างมีประสิทธิภาพ
ในการสร้าง CSS Masonry Layout เราสามารถใช้หลายวิธี แต่ที่เป็นที่นิยมและง่ายต่อการใช้งานคือการใช้ CSS Grid และ Flexbox พร้อมกันไป ตัวอย่างพื้นฐานของการใช้ CSS เพื่อสร้าง Masonry Layout อาจเริ่มได้ดังนี้
ตัวอย่างโค้ดเบื้องต้น
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Layout</title>
<style>
.masonry {
column-count: 3;
column-gap: 1em;
}
.masonry-item {
background-color: #ffc;
margin-bottom: 1em;
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div class="masonry">
<div class="masonry-item">Item 1</div>
<div class="masonry-item">Item 2 with more content</div>
<div class="masonry-item">Item 3</div>
<div class="masonry-item">Item 4 with even more content than the others</div>
<div class="masonry-item">Item 5</div>
</div>
</body>
</html>
ในโค้ดด้านบน เราใช้ `column-count` เพื่อบอกจำนวนคอลัมน์ที่ต้องการและ `column-gap` เพื่อกำหนดช่องว่างระหว่างคอลัมน์ ข้อดีของการใช้เทคนิคนี้คือความเรียบง่าย แต่ข้อจำกัดคือการจัดเรียงอาจไม่เป๊ะเท่าเทคนิคขั้นสูง
หากคุณต้องการควบคุมการจัดเรียงและการแสดงผลให้ดีขึ้น คุณอาจเลือกใช้ JavaScript เข้ามาช่วยในกรณีที่ CSS อย่างเดียวทำไม่พอ วิธีที่นิยมคือการใช้ `Masonry.js` ซึ่งเป็นไลบรารีที่ช่วยจัดการการวางองค์ประกอบให้อยู่ในรูปแบบที่ต้องการ
// ตัวอย่างการใช้ Masonry.js
var elem = document.querySelector('.masonry');
var msnry = new Masonry( elem, {
// options
itemSelector: '.masonry-item',
columnWidth: 200
});
Masonry.js มีความยืดหยุ่นสูงและสามารถจัดการช่องว่างและการซ้อนองค์ประกอบได้ดีมากกว่า ใช้งานได้ไม่ยากหากคุณติดตั้งผ่าน npm หรือดาวน์โหลดผ่าน CDN
หลายเว็บไซต์ที่ต้องการแสดงผลภาพหรือบทความในหน้าเดียวกัน เลือกใช้ Masonry Layout ด้วยเหตุผลที่ว่าทำให้หน้าเว็บดูมีระเบียบและทันสมัย ตัวอย่างที่ชัดเจนที่สุดคือ Pinterest เอง ซึ่งเป็นแรงบันดาลใจให้รูปแบบนี้กลายเป็นที่นิยม
ตัวอย่างการใช้งานในชีวิตจริงได้แก่:
- เว็บไซต์แกลเลอรีที่ต้องการโชว์ภาพถ่ายขนาดต่างกัน
- บล็อกที่มีบทความหลายรูปแบบและต้องการพื้นที่แสดงผลอย่างมีสไตล์
- แพลตฟอร์มอีคอมเมิร์ซที่ต้องการโชว์สินค้าที่มีขนาดและรูปแบบต่างกัน
การจัดเรียงหน้าด้วย CSS Masonry Layout เป็นวิธีที่สนุกและสร้างสรรค์สำหรับนักพัฒนาเว็บไซต์ ไม่ว่าคุณจะเลือกใช้วิธีง่าย ๆ ด้วย CSS หรือการอัปเกรดมาใช้ Masonry.js เพื่อเพิ่มความสามารถ การลองใช้เทคนิคนี้สามารถทำให้เว็บไซต์ของคุณโดดเด่นขึ้นมาได้ทันที
หากคุณสนใจศึกษาลึกเกี่ยวกับการจัดหน้าเว็บด้วยเทคนิคอันหลากหลายเหล่านี้ การเรียนที่ Expert-Programming-Tutor (EPT) สามารถทำให้คุณก้าวไปเป็นนักพัฒนาที่มีความเชี่ยวชาญด้านนี้ เพียงแค่คุณก้าวเข้ามาและเปิดใจเรียนรู้กับเรา!
วิธีการจัดหน้าแบบ Masonry ไม่เพียงแต่ทำให้เว็บไซต์สวยงามเท่านั้น แต่ยังสร้างประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ ซึ่งเป็นปัจจัยที่สำคัญไม่แพ้กันในการพัฒนาเว็บไซต์ในปัจจุบัน
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com