สร้าง Layouts Grid Layouts อย่างรวดเร็วด้วย Bricks.js

มันง่ายเสมอที่จะ สร้างกริดด้วย jQuery, ใช้ปลั๊กอินและแบบฝึกหัดฟรีจากนักพัฒนา.

อย่างไรก็ตามกริดก่ออิฐนั้นมีความแข็งแรงกว่าในการสร้างเนื่องจากพวกเขา ไม่พอดีทั่วทั้งหน้า. คุณจะมีความกว้างขนาดคงที่สำหรับคอลัมน์ยกเว้น ความสูงของรายการอาจแตกต่างกันมาก.

ในการทำ กริดก่ออิฐพิกเซลที่สมบูรณ์แบบ คุณต้องการปลั๊กอินเช่น Bricks.js.

ปลั๊กอินนี้เป็นโอเพ่นซอร์สทั้งหมดและรวดเร็วอย่างน่าขัน มันจะ แสดงผลกริดในเวลาน้อยกว่าครึ่งวินาที, แม้จะมีหลายสิบรายการในหน้า.

คนส่วนใหญ่รู้จักกริดก่ออิฐฉาบปูนจาก Pinterest เนื่องจากพวกเขานิยมใช้เลย์เอาต์ แต่มันก็โตขึ้นเรื่อย ๆ ใช้ในเว็บไซต์อื่น ๆ อีกมากมาย, เกินไป.

ในการเริ่มต้นกับ Bricks.js คุณต้องมี เนื้อหาบางส่วน และ เค้าโครงหน้าเริ่มต้น. คุณติดตั้งปลั๊กอินได้โดยตรงจาก npm หรือผ่าน GitHub ถ้าทำได้ง่ายกว่า.

ด้วยการตั้งค่าเริ่มต้นคุณจะผ่าน สามพารามิเตอร์ที่เฉพาะเจาะจง:

1. ภาชนะ - องค์ประกอบคอนเทนเนอร์ DOM สำหรับกริด
2. แน่น - คุณลักษณะ ที่กำหนดวิธีการที่รายการไหลในตาราง
3. ขนาด - อาร์เรย์ของความกว้างและท่อระบายน้ำ, กำหนดเป็นพิกเซล

ปลั๊กอินใช้ค่าเหล่านี้ทั้งหมดเพื่อทำให้กริดก่ออิฐอัตโนมัติตั้งแต่เริ่มต้น.

และคุณยังสามารถ ใช้สำหรับการโหลดแบบไม่ จำกัด ถ้าคุณต้องการกริดก่ออิฐที่ทำงานเหมือน Pinterest.

ตรวจสอบหน้าตัวอย่างสำหรับ ตารางแบบโต้ตอบ ที่คุณสามารถเปลี่ยนแปลงได้สำหรับการทดสอบ คุณ กำหนดจำนวนองค์ประกอบทั้งหมด และมันจะทำให้กระบวนการโดยอัตโนมัติในขณะที่แสดงเวลาในการเรนเดอร์ทั้งหมด.

ตัวอย่างเช่นฉันทดสอบกริดด้วย 500 องค์ประกอบ และใช้เวลาเพียง 13 มิลลิวินาที ทำให้สำเร็จ. สิ่งนี้ไม่ได้คำนึงถึงเวลาในการโหลดภาพ 500 ภาพทั้งหมด แต่ 13 ms สำหรับกริดที่สร้างขึ้นอัตโนมัติ น่าประทับใจมาก.

เริ่มต้นด้วยตัวคุณเองโดยดาวน์โหลดไฟล์จาก GitHub และทำตามคำแนะนำในการติดตั้ง นี่อาจรู้สึกสับสนในตอนแรก แต่ยิ่งคุณตั้งของเล่นมากเท่าไหร่ก็จะยิ่งตั้งค่าได้ง่ายขึ้น.