इस स्क्रिप्ट के साथ उत्तरदायी छाँटे हुए ग्रिड लेआउट बनाएँ

कस्टम ग्रिड स्क्रैच से बनाने के लिए कुछ सबसे कठिन विशेषताएं हैं। आप बहुत सारे चिनाई ग्रिड प्लगइन्स पा सकते हैं लेकिन वे प्रत्येक की अपनी सीमाएं और आवश्यकताएं हैं.

मुरी लिपि जरूरत है, जो किसी के लिए एक मजबूत विकल्प है स्पर्श समर्थन के साथ छँटाई और उत्तरदायी ग्रिड तत्वों.

यह बनाया गया है एनिमेशन के लिए वेलोसिटी.जेएस, इसके साथ मोबाइल टच को संभालने के लिए Hammer.js लाइब्रेरी. Muuri नहीं करता jQuery की आवश्यकता है, तो यह ग्रिड इंटरफेस के लिए कुछ वेनिला जावास्क्रिप्ट प्लगइन्स में से एक है.

मुख्य परियोजना पृष्ठ पर, आपको एक मिल जाएगा सभी सुविधाओं के साथ सुंदर ग्रिड डेमो. एनिमेशन प्रभाव, ड्रैग एंड ड्रॉप सपोर्ट, और अलग-अलग आकार के अलग-अलग ग्रिड तत्व। यह डेमो दिखाता है कि मुरी ग्रिड के साथ आपका कितना नियंत्रण है.

आप चुन सकते हैं कौन से तत्व प्रदर्शित करने हैं, वर्गों पर आधारित (यानी फ़िल्टरिंग), साथ में आप खाली स्थान कैसे भरना चाहते हैं.

चिनाई ग्रिड अक्सर खाली स्थानों को छोड़ देते हैं क्योंकि ग्रिड तत्व हमेशा एक साथ पूरी तरह से फिट नहीं होते हैं. यह Pinterest जैसी बड़ी वेबसाइटों के लिए बहुत विशिष्ट है। यद्यपि, आप कर सकते हैं ड्रैग करने योग्य ग्रिड आइटम जोड़ें बहुत ज्यादा किसी भी उपयोगकर्ता नियंत्रित इंटरफेस.

के बारे में सोचो विजेट किए गए लेआउट के साथ सामाजिक प्रोफ़ाइल और वे कैसे काम करेंगे। या, के बारे में सोचो कस्टम-डू सूचियाँ प्रगतिशील वेब ऐप के रूप में चल रही हैं जावास्क्रिप्ट पर। वास्तव में म्यूरी पेज पर इसका एक बड़ा डेमो है जो टू-डू सूची का नमूना दिखाता है और यह मोबाइल के लिए PWA के रूप में कैसे काम कर सकता है.

आरंभ करने के लिए, आप बस मुरी लिपियों के साथ-साथ सभी जावास्क्रिप्ट निर्भरता शामिल करें. आप उन्हें npm के माध्यम से नीचे खींच सकते हैं या GitHub रेपो से एक प्रति ले सकते हैं.

फिर आप एक कंटेनर ग्रिड तत्व बनाएं तथा लक्ष्य है कि नए उदाहरण के साथ Muuri () तरीका. GitHub रेपो से कोड स्निपेट्स कॉपी करके यह सब बहुत सरल और विशेष रूप से उपयोग करने में आसान है.

साथ में सभी आधुनिक ब्राउज़रों (IE9 +) और एक टच-सक्षम इंटरफ़ेस के लिए पूर्ण समर्थन, यह प्लगइन ड्रैग एंड ड्रॉप ग्रिड विशेषताओं के लिए सर्वश्रेष्ठ है.

मुरी मुखपृष्ठ के माध्यम से और लाइव डेमो के साथ छेड़छाड़ करके अधिक जानें। यह है एक गतिशील ग्रिड के लिए महान प्रणाली और उसका अभी भी सक्रिय विकास में है, इसलिए आप भरोसा कर सकते हैं कि यह प्लगइन लंबी दौड़ के लिए आसपास रहने वाला है.