Bricks.js के साथ फास्ट मेसनरी ग्रिड लेआउट बनाएं

यह हमेशा के लिए बहुत आसान है jQuery के साथ ग्रिड बनाएँ, डेवलपर्स से प्लगइन्स और मुफ्त ट्यूटोरियल का उपयोग करना.

हालांकि, चिनाई ग्रिड निर्माण के लिए कठिन हैं, क्योंकि वे पूरे पृष्ठ पर समान रूप से फिट नहीं है. आपके पास कॉलम के लिए निश्चित आकार की चौड़ाई होगी, लेकिन आइटम की ऊँचाई बेतहाशा भिन्न हो सकती है.

बनाने के लिए ए पिक्सेल-सही चिनाई ग्रिड आपको एक प्लगइन की आवश्यकता है जैसे Bricks.js.

यह प्लगइन पूरी तरह से खुला-स्रोत है और हास्यास्पद रूप से तेज है। यह हूँ आधे से भी कम समय में ग्रिड को प्रस्तुत करना, यहां तक ​​कि पृष्ठ पर दर्जनों वस्तुओं के साथ.

ज्यादातर लोग चिनाई से चिनाई ग्रिड को पहचानते हैं क्योंकि वे लेआउट को लोकप्रिय बनाते हैं। लेकिन, यह तब से बड़ा हो गया है कई अन्य वेबसाइटों में उपयोग किया जाता है, बहुत.

Bricks.js के साथ आरंभ करने के लिए, आपको आवश्यकता होगी कुछ सामग्री और ए डिफ़ॉल्ट पृष्ठ लेआउट. यदि आप आसान है तो आप npm से या GitHub के माध्यम से प्लगइन को स्थापित करते हैं.

प्रारंभिक सेटअप के साथ, आप पास होते हैं तीन विशिष्ट पैरामीटर:

1. पात्र - ए डोम कंटेनर तत्व ग्रिड के लिए
2. पैक किया हुआ - एक गुण यह निर्धारित करता है कि आइटम ग्रिड में कैसे बहते हैं
3. आकार - एक चौड़ाई और गटर की सरणी, पिक्सेल में परिभाषित किया गया है

प्लगइन खरोंच से चिनाई ग्रिड को स्वचालित करने के लिए इन सभी मूल्यों का उपयोग करता है.

और, आप भी कर सकते हैं अनंत लोडिंग के लिए इसका उपयोग करें यदि आप चिनाई ग्रिड चाहते हैं जो Pinterest की तरह ही काम करते हैं.

एक के लिए डेमो पृष्ठ देखें इंटरैक्टिव ग्रिड कि आप परीक्षण के लिए बदल सकते हैं। आप तत्वों की कुल संख्या को परिभाषित करें और यह कुल प्रतिपादन समय प्रदर्शित करते हुए प्रक्रिया को स्वचालित करेगा.

उदाहरण के लिए, मैंने एक ग्रिड का परीक्षण किया 500 तत्वों और यह केवल लिया 13 मिली सेकेंड पूरा करना। यह सभी 500 छवियों को लोड करने के लिए समय में कारक नहीं है, लेकिन ऑटो उत्पन्न ग्रिड के लिए 13 एमएस बहुत प्रभावशाली है.

GitHub से फ़ाइलों को डाउनलोड करके और इंस्टॉल निर्देशों का पालन करके स्वयं आरंभ करें। यह पहली बार में भ्रामक लग सकता है लेकिन जितना अधिक आप इसे स्थापित करते हैं उतना ही आसान होता है.