कैसे pinterest.com के निरपेक्ष div स्टैकिंग लेआउट को दोहराने के लिए [बंद]

104

बंद हो गया । इस प्रश्न पर अधिक ध्यान देने की आवश्यकता है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि यह इस पोस्ट को संपादित करके केवल एक समस्या पर केंद्रित हो ।

7 साल पहले बंद हुआ ।

इस प्रश्न को सुधारें

मैं Pinterest.com के div लेआउट को दोहराने के लिए देख रहा हूँ, विशेष रूप से कि कैसे ब्राउज़र पर अधिक / कम फिट होने के लिए कॉलम की संख्या समायोजित होती है और ऊर्ध्वाधर स्टैकिंग आसन्न कॉलम हाइट्स पर निर्भर नहीं है। स्रोत कोड दिखाता है कि प्रत्येक div स्थिति निरपेक्ष है। एक सह-संस्थापक ने एक Quora पोस्ट का उत्तर दिया है जिसमें कहा गया है कि यह कस्टम jQuery और CSS के साथ किया गया है। मैं चाहूंगा कि परिणाम बाएं से दाएं क्रमबद्ध हों। आप इसे स्वयं बनाने के लिए जो भी दिशा प्रदान कर सकते हैं वह बहुत सराहनीय है।

jquery css layout

— chrickso
स्रोत

मैं अपने खुद के सरल Jquery और सीएसएस के साथ कोडित। यदि आप चाहते हैं कि आप इसे आकार बदलने के लिए बदल दें, तो इसे केवल एक फंक्शन में लपेटें और कंटेनर एलिमेंट पर रिसाइज पर देखें jsfiddle.net/92gxyugb/1

— एंड्रयू डब्ल्यूसी ब्राउन

79

आप इस प्रकार की कार्यक्षमता के लिए jQuery प्लग-इन मेसनरी पर भी जांच कर सकते हैं ।

— बॉब।
स्रोत

3

सचमुच अद्भुत पुस्तकालय। अब मैं इसे बिना किसी समस्या के उपयोग कर रहा हूं।

— अहमत -

183

मैंने Pinterest स्क्रिप्ट लिखी है। आईडी लेआउट के लिए असंबंधित हैं, और अन्य इंटरैक्शन-संबंधित जेएस के लिए उपयोग किया जाता है। यहां बताया गया है कि यह कैसे काम करता है:

पहले से:

बिल्कुल पिन कंटेनर की स्थिति
स्तंभ की चौड़ाई निर्धारित करें
स्तंभों (गटर) के बीच मार्जिन का निर्धारण करें

एक सरणी सेट करें:

मूल कंटेनर की चौड़ाई प्राप्त करें; कॉलम के # फिट होने की गणना करें
# कॉलम के बराबर लंबाई के साथ एक खाली सरणी बनाएं। लेआउट बनाते समय प्रत्येक कॉलम की ऊंचाई को संग्रहीत करने के लिए इस सरणी का उपयोग करें, उदाहरण के लिए कॉलम 1 की ऊंचाई को सरणी [0] के रूप में संग्रहीत किया जाता है।

प्रत्येक पिन के माध्यम से लूप:

प्रत्येक पिन को सबसे छोटे कॉलम में इस समय डालें
"बायां:" === कॉलम # (इंडेक्स ऐरे) कालम चौड़ाई + मार्जिन
"शीर्ष:" === उस समय के सबसे छोटे स्तंभ के लिए सरणी (ऊंचाई) में मान
अंत में, कॉलम की ऊंचाई (सरणी मान) में पिन की ऊंचाई जोड़ें

परिणाम हल्का है। Chrome में, 50+ पिन का पूरा पृष्ठ बिछाने पर <10ms लगते हैं।

— इवान तेज
स्रोत

4

आप कॉलम की ऊंचाई की गणना कैसे करते हैं? आप कैसे जानते हैं कि यदि आपके भीतर वस्तुओं की संख्या और ऊंचाई नहीं पता है तो यह कितना ऊंचा होना चाहिए? किसी भी मौका आप कुछ छद्म कोड प्रदर्शित करने के लिए लेआउट कर सकते हैं?

— माइकल जियोवानी पुमो

22

यहाँ एक ठोस ट्यूटोरियल है - benholland.me/javascript/…

— hollandben

1

एनोनिमस उपयोगकर्ता से प्रतिक्रिया (पंक्ति को संपादित करने में मिली): उत्सुकता से मैंने jQuery में बिल्कुल एक ही स्क्रिप्ट की, वास्तव में 1 पंक्ति और एन कॉलम के साथ एक तालिका बनाने के थोड़े अंतर के साथ, और बस उन्हें बाएं से दाएं सबसे छोटे कॉलम में जोड़ दिया। प्राथमिकता। हालांकि मैंने एक "न्यूनतम ऊंचाई अंतर" भी जोड़ा था, लगातार स्थिति को एक स्तंभ को छोड़ना आवश्यक था जब स्थिति बाएं से दाएं होती है, यह लेआउट को यथासंभव ऊंचाइयों को

— खोए

1

@MichaelGiovanniPumo मुझे लगता है कि ऊंचाई को लेआउट से पहले पता होना चाहिए (Pinterest के मामले में), उनके पास एक "प्रारंभिक" स्थिति नहीं है जो एक दूसरे को ओवरलैप करते हैं। यदि ऊंचाई ज्ञात नहीं है तो यह नहीं किया जा सकता है।

— ptgamr

1

@ हॉलैंडबेन का लिंक मर चुका है, नया लिंक: benholland.me/javascript/2012/02/20/…

— Lukmo

57

हमने एक jQuery प्लगइन जारी किया क्योंकि हमें Wookmark के लिए कई बार एक ही प्रश्न मिला । यह बिल्कुल इस प्रकार का लेआउट बनाता है। इसे यहाँ देखें - Wookmark jQuery प्लगइन

— GBKS
स्रोत

4

यह समाधान चिनाई की तुलना में तेजी से लोड होता है

— माइकल एल वॉटसन

जो आपको बेहतर लगे? वूकमार्क या चिनाई?

— रामजे

मैं इसे चिनाई पर पसंद करता हूं, ऐसा लगता है जैसे माइकल ने कहा।

— nerdburn

2

सभी विकल्पों को देखने के बाद, मैंने इस तरह से Pinterest के समान लेआउट को लागू करना समाप्त किया:

सभी DIVs हैं:

div.tile {
    display: inline-block;
    vertical-align: top;
}

यह उन्हें पंक्तियों में स्थिति से बेहतर बनाता है जब वे फ्लोट किए जाते हैं।

फिर जब पेज लोड हो जाता है, तो मैं उन सभी के बीच अंतराल को दूर करने के लिए जावास्क्रिप्ट में सभी DIV को पुन: प्रसारित करता हूं। जब यह अच्छी तरह से काम करता है:

DIV ऊंचाई में बहुत अलग नहीं हैं।
आपको आदेश देने के कुछ मामूली उल्लंघनों का बुरा नहीं लगता (कुछ तत्व जो नीचे थे, उन्हें ऊपर खींचा जा सकता है)।
आप नीचे की रेखा को अलग ऊँचाई का नहीं मानते हैं।

इस दृष्टिकोण का लाभ - आपका HTML खोज इंजन के लिए समझ में आता है, फ़ायरवॉल द्वारा जावास्क्रिप्ट अक्षम / अवरुद्ध के साथ काम कर सकता है, HTML में तत्वों का क्रम तार्किक अनुक्रम (पुराने से पहले नया आइटम) से मेल खाता है

— esp
स्रोत

अरे, क्या आप मुझे बता सकते हैं कि आपने उन ऑफसेट की गणना कैसे की, जिन्हें आपको प्रतिस्थापित करना था? और यह भी कि आपने अंतिम तत्व के दाईं ओर होने की समस्या को कैसे हल किया, क्योंकि एक तत्व है जो थोड़ा बड़ा है और इसे वहां धकेलता है।

— लुकास ओपेरमन

@ लुकसऑपरमैन 1) टाइल के लिए ऑफसेट पिछली पंक्ति में एक ही कॉलम में टाइल के लिए ऑफसेट का योग है और पिछली पंक्ति में उच्चतम टाइल की ऊंचाई और एक ही कॉलम में टाइल की ऊंचाई के बीच का अंतर पिछली पंक्ति में। Dev.sheeporpig.com/news पर एक नज़र डालें (आपको सबसे पहले विकास साइट पर पहुँच प्राप्त करने के लिए लिंक dev.sheeporpig.com/sheep/3210 पर क्लिक करना होगा - ताकि आप अलग-अलग फ़ाइलों, स्क्रिप्ट फ़ाइल में असम्बद्ध और टिप्पणी की गई स्क्रिप्ट देख सकें stock_news.js, function compressTiles।

— जासूसी

@LukasOppermann 2) यदि आप जवाब में सीएसएस का उपयोग करते हैं (विशेष रूप से प्रदर्शन: इनलाइन-ब्लॉक) तो ऐसा नहीं होता है। यह केवल तब होता है जब आप तैरते हैं: अपने divs को छोड़ दिया। मैं फ्लोट का उपयोग नहीं करता।

— जासूसी

0

वे आईडी (खराब समाधान ... बेहतर उपयोग वर्ग नाम) के साथ स्तंभों द्वारा संस्थाओं को विभाजित करते हैं और फिर स्तंभ समूहों द्वारा स्थिति की गणना करते हैं

— ant_Ti
स्रोत

2

+1 उनके स्रोत कोड के माध्यम से देखने के लिए।

— बोजैंगल्स

यह मेरे लिए दिलचस्प था, लेकिन मुझे लगता है कि कम js गणना के साथ

— बेटर

आप display: inline-blockमुझे लगता है उपयोग कर सकते हैं , लेकिन अलग-अलग ऊर्ध्वाधर ऊंचाई के आइटम एक साथ नहीं बैठेंगे।

— Bojangles

1

कॉलम कंटेनरों का उपयोग करना बेहतर होता है (साथ में float:left;और पिछले एक के साथ overflow: hidden;) और वहां के तत्वों को संग्रहीत करता है

— एंटी 14

4

अच्छी बात। यदि आप वास्तव में जावास्क्रिप्ट मार्ग पर जाना चाहते हैं, तो आप jQuery मेसनरी का उपयोग कर सकते हैं?

— Bojangles

0

आप यह कोशिश क्यों नहीं करते, सरल जे एस सामान

http://vanilla-masonry.desandro.com/index.html

या यहाँ तक कि jQuery और स्क्रॉल लोडिंग के साथ भी।

http://masonry.desandro.com/index.html

— एक उज्ज्वल कार्यकर्ता
स्रोत

0

आप फ़्लो का उपयोग कर सकते हैं और न्यूनतम चौड़ाई तक पहुँचने के लिए डिव को स्वचालित रूप से गिरने के लिए मजबूर करने के लिए न्यूनतम चौड़ाई के साथ प्रतिशत का उपयोग करके अपनी div चौड़ाई का आकार दे सकते हैं? इसका तरीका हमें http://www.goldtree.co.za/work पर काम करने में मिला

— आई एम गोल्डट्री
स्रोत