สร้างเลย์เอาต์กริดแบบเรียงต่อกันที่ตอบสนองได้ด้วยสคริปต์นี้
กริดที่กำหนดเอง เป็นคุณสมบัติที่ยากที่สุดในการสร้างตั้งแต่เริ่มต้น คุณสามารถค้นหาปลั๊กอินกริดก่ออิฐได้มากมาย แต่ละคนมีข้อ จำกัด และข้อกำหนดของตัวเอง.
สคริปต์ Muuri เป็นทางเลือกที่แข็งแกร่งสำหรับทุกคนที่ต้องการ องค์ประกอบกริดเรียงลำดับและตอบสนองด้วยการสนับสนุนการสัมผัส.
มันสร้างขึ้นบน Velocity.js สำหรับอนิเมชั่น, พร้อมกับ คลัง Hammer.js สำหรับการจัดการระบบสัมผัสมือถือ. Muuri ไม่ ต้องการ jQuery, ดังนั้นจึงเป็นหนึ่งในปลั๊กอินวานิลลา JavaScript ไม่กี่ตัวสำหรับอินเทอร์เฟซกริด.
ในหน้าโครงการหลักคุณจะพบ การสาธิตกริดที่สวยงามพร้อมคุณสมบัติทั้งหมด. เอฟเฟกต์แอนิเมชันการสนับสนุนการลากและวางและองค์ประกอบกริดที่แตกต่างกันที่มีขนาดแตกต่างกัน การสาธิตนี้แสดงให้เห็นว่าคุณสามารถควบคุม Muuri grid ได้มากเพียงใด.
คุณสามารถเลือก องค์ประกอบที่จะแสดง, อ้างอิงคลาส (เช่นการกรอง) พร้อมกับ วิธีที่คุณต้องการเติมช่องว่าง.
กริดก่ออิฐมักจะออกจากจุดที่ว่างเปล่าเพราะ องค์ประกอบกริดไม่ได้รวมเข้าด้วยกันอย่างสมบูรณ์แบบเสมอไป. นี่เป็นเรื่องปกติสำหรับเว็บไซต์ขนาดใหญ่เช่น Pinterest แม้ว่าคุณจะสามารถ เพิ่มรายการตารางที่ลากไปมาได้ ค่อนข้างมากกับอินเตอร์เฟสที่ผู้ใช้ควบคุม.
คิดเกี่ยวกับ โปรไฟล์โซเชียลพร้อมการจัดวางวิดเจ็ต และพวกเขาจะทำงานอย่างไร หรือคิดเกี่ยวกับ รายการสิ่งที่ต้องทำที่กำหนดเองที่ทำงานเป็นเว็บแอพก้าวหน้า บน JavaScript มีตัวอย่างที่ดีของเรื่องนี้ในหน้า Muuri ที่แสดงรายการสิ่งที่ต้องทำและวิธีการทำงานเป็น PWA บนมือถือ.
ในการเริ่มต้นคุณเพียงแค่ รวมการพึ่งพา JavaScript ทั้งหมดพร้อมกับสคริปต์ Muuri. คุณสามารถดึงลงมาจนถึงเวลา 23.00 น. หรือหยิบสำเนาจาก GitHub repo.
จากนั้นคุณ สร้างองค์ประกอบตารางภาชนะ และ กำหนดเป้าหมายด้วยอินสแตนซ์ใหม่ของ Muuri () วิธี. มันคือทั้งหมดที่ค่อนข้างง่ายและใช้งานง่ายโดยเฉพาะการคัดลอกโค้ดจาก GitHub repo.
กับ รองรับเบราว์เซอร์ที่ทันสมัยทั้งหมด (IE9 +) และอินเทอร์เฟซที่เปิดใช้งานแบบสัมผัส, ปลั๊กอินนี้เป็นหนึ่งในคุณสมบัติที่ดีที่สุดสำหรับการลากและวางตาราง.
เรียนรู้เพิ่มเติมโดยการอ่านผ่านหน้าแรกของ Muuri และทำการซ่อมแซมด้วยการสาธิตสด มันคือ ระบบที่ดีเยี่ยมสำหรับกริดแบบไดนามิก และมัน ยังอยู่ในการพัฒนาที่ใช้งานอยู่, ดังนั้นคุณจึงสามารถไว้วางใจปลั๊กอินนี้ได้ในระยะยาว.
