Δημιουργία ευαίσθητων διαβαθμίσεων πλέγματος με αυτό το σενάριο

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

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

Είναι χτισμένο πάνω Velocity.js για τα κινούμενα σχέδια, μαζί με Βιβλιοθήκη Hammer.js για χειρισμό κινητής αφής. Muuri δεν απαιτούν jQuery, έτσι είναι ένα από τα λίγα plugins JavaScript vanilla για διασυνδέσεις δικτύου.

Στη σελίδα του κύριου έργου, θα βρείτε a όμορφο demo πλέγματος με όλα τα χαρακτηριστικά. Εφέ κίνησης, υποστήριξη μεταφοράς και απόθεσης και διαφορετικά στοιχεία πλέγματος διαφόρων μεγεθών. Αυτό το demo προβάλλει πόσο έλεγχο έχετε με ένα πλέγμα Muuri.

Μπορείς να διαλέξεις τα στοιχεία για την εμφάνιση, με βάση τις κατηγορίες (δηλαδή φιλτράρισμα), μαζί με πώς θέλετε να συμπληρώσετε κενές θέσεις.

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

Σκέφτομαι για κοινωνικά προφίλ με widgetized διατάξεις και πώς θα λειτουργούσαν. Ή, σκεφτείτε προσαρμοσμένες λίστες υποχρεώσεων που εκτελούνται ως προοδευτικές εφαρμογές ιστού στο JavaScript. Υπάρχει πραγματικά μια μεγάλη επίδειξη αυτού του γεγονότος στη σελίδα Muuri παρουσιάζοντας μια λίστα δειγμάτων και πώς θα μπορούσε να λειτουργήσει ως PWA στο κινητό.

Για να ξεκινήσετε, απλά περιλαμβάνει όλες τις εξαρτήσεις JavaScript, μαζί με τα scripts του Muuri. Μπορείτε να τα τραβήξετε μέσα από npm ή να πάρετε ένα αντίγραφο από το repo GitHub.

Τότε, εσύ δημιουργήστε ένα στοιχείο πλέγματος εμπορευματοκιβωτίων και στοχεύστε αυτό με μια νέα εμφάνιση του Muuri () μέθοδος. Είναι όλα πολύ απλά και ιδιαίτερα εύκολο στη χρήση, αντιγράφοντας τα αποσπάσματα κώδικα από το repo του GitHub.

Με πλήρη υποστήριξη για όλα τα σύγχρονα προγράμματα περιήγησης (IE9 +) και μια διεπαφή με δυνατότητα αφής, αυτό το plugin είναι ένα από τα καλύτερα χαρακτηριστικά πλέγματος drag & drop.

Μάθετε περισσότερα διαβάζοντας μέσω της αρχικής σελίδας του Muuri και διασκεδάζοντας με τα live demos. Αυτό είναι ένα εξαιρετικό σύστημα για δυναμικά πλέγματα και είναι ακόμα σε ενεργό ανάπτυξη, έτσι μπορείτε να εμπιστευτείτε αυτό το plugin θα είναι γύρω για το μακρινό.