Δημιουργήστε διατάξεις γρήγορου πλέγματος τοιχοποιίας με το Bricks.js

Πάντα ήταν πολύ απλός δημιουργήστε πλέγματα με το jQuery, χρησιμοποιώντας plugins και δωρεάν μαθήματα από προγραμματιστές.

Ωστόσο, τα πλέγματα τοιχοποιίας είναι πιο σκληρά για να κατασκευαστούν, δεδομένου ότι δεν ταιριάζουν ομοιόμορφα στη σελίδα. Θα έχετε πλάτη σταθερού μεγέθους για στήλες, αλλά για το Τα ύψη των στοιχείων μπορούν να ποικίλουν άγρια.

Για να κάνετε ένα pixel-τέλειο πλέγμα τοιχοποιίας χρειάζεστε ένα plugin όπως Bricks.js.

Αυτό το plugin είναι απόλυτα ανοιχτό και γελοία γρήγορα. Θα το κάνει καθιστούν το πλέγμα σε λιγότερο από μισό δευτερόλεπτο, ακόμη και με δεκάδες αντικείμενα στη σελίδα.

Οι περισσότεροι άνθρωποι αναγνωρίζουν τα πλέγματα τοιχοποιίας από το Pinterest από τη στιγμή που διάπλασαν τη διάταξη. Όμως, έχει μεγαλώσει από τότε που χρησιμοποιείται σε πολλές άλλες ιστοσελίδες, πολύ.

Για να ξεκινήσετε με το Bricks.js, θα χρειαστείτε κάποιο περιεχόμενο και ένα προεπιλεγμένη διάταξη σελίδας. Εγκαθιστάτε το plugin από το npm ή μέσω του GitHub αν αυτό είναι πιο εύκολο.

Με την αρχική ρύθμιση, περάσατε τρεις ειδικές παραμέτρους:

1. Δοχείο - ένα Στοιχείο container DOM για το δίκτυο
2. Συσκευασμένα - ένα Χαρακτηριστικό που καθορίζει τον τρόπο ροής των στοιχείων στο δίκτυο
3. Μεγέθη - ένα σειρά πλάτους και υδρορροές, ορίζεται σε εικονοστοιχεία

Το plugin χρησιμοποιεί όλες αυτές τις τιμές για να αυτοματοποιήσει το πλέγμα τοιχοποιίας από την αρχή.

Και, μπορείτε ακόμη και χρησιμοποιήστε το για άπειρη φόρτωση αν θέλετε πλέγματα τοιχοποιίας που λειτουργούν ακριβώς όπως το Pinterest.

Δείτε τη δοκιμαστική σελίδα για ένα διαδραστικό δίκτυο που μπορείτε να αλλάξετε για έλεγχο. Εσύ ορισμός του συνολικού αριθμού στοιχείων και θα αυτοματοποιήσει τη διαδικασία κατά την εμφάνιση του συνολικού χρόνου απόδοσης.

Για παράδειγμα, δοκιμάσαμε ένα πλέγμα με 500 στοιχεία και πήρε μόνο 13 χιλιοστά του δευτερολέπτου να ολοκληρωσω. Αυτό δεν επηρεάζει το χρόνο για να φορτωθούν και οι 500 εικόνες, αλλά 13 ms για ένα αυτόματα δημιουργημένο πλέγμα είναι πολύ εντυπωσιακό.

Ξεκινήστε τον εαυτό σας, κατεβάζοντας τα αρχεία από το GitHub και ακολουθώντας τις οδηγίες εγκατάστασης. Αυτό μπορεί να προκαλέσει σύγχυση κατά την πρώτη φορά, αλλά όσο περισσότερο παίζετε με αυτό τόσο πιο εύκολο είναι να δημιουργήσετε.