কীভাবে Pinterest.com এর পরম ডিভ স্ট্যাকিং লেআউটটিকে প্রতিলিপি করা যায় [বন্ধ]

Question

আমি Pinterest.com এর ডিভা লেআউটটি প্রতিলিপি করতে চাইছি, বিশেষত কীভাবে কলামগুলির সংখ্যা ব্রাউজারের আকারে আরও কম / কম ফিট করতে পারে এবং উল্লম্ব স্ট্যাকিং সংলগ্ন কলামের উচ্চতাগুলির উপর নির্ভর করে না। উত্স কোডটি দেখায় যে প্রতিটি ডিভের অবস্থান পরম। একজন সহ-প্রতিষ্ঠাতা একটি কোওর পোস্টের উত্তর দিয়েছেন যা জানিয়েছে যে এটি কাস্টম jQuery এবং CSS এর মাধ্যমে করা হয়েছে done আমি ফলাফলগুলি বাম থেকে ডানে সাজিয়ে রাখতে চাই। এটিকে নিজে তৈরি করতে আপনি যে কোনও দিকনির্দেশনা সরবরাহ করতে পারেন তা প্রশংসিত হবে।

Comments

আমি সাধারণ জ্যাকুয়ারি এবং সিএসএস দিয়ে আমার নিজের কোড করেছিলাম। আপনি যদি পুনরায় আকার পরিবর্তন করতে চান তবে এটি কেবল একটি ফাংশনে মুড়ে রাখুন

— অ্যান্ড্রু ডব্লিউসি ব্রাউন

Answer 1

আপনি এই জাতীয় কার্যকারিতাটির জন্য jQuery প্লাগ-ইন রাজমিস্ত্রি পরীক্ষা করতে পারেন ।

Comments

সত্যিই আশ্চর্যজনক গ্রন্থাগার। এখন আমি কোনও সমস্যা ছাড়াই এটি ব্যবহার করছি।

— আহমেটবি - গুগল

Answer 2

আমি Pinterest স্ক্রিপ্ট লিখেছিলাম। আইডি গুলি লেআউটের সাথে সম্পর্কিত নয়, এবং অন্যান্য ইন্টারঅ্যাকশন সম্পর্কিত জেএসের জন্য ব্যবহৃত হয়। এটি কীভাবে কাজ করে তার ভিত্তি এখানে:

পূর্বেই:

• একেবারে পিনের পাত্রে অবস্থান করুন
• কলামের প্রস্থ নির্ধারণ করুন
• কলামগুলির মধ্যে মার্জিন নির্ধারণ করুন (জলের)

একটি অ্যারে সেটআপ করুন:

• মূল পাত্রে প্রস্থ পান; ফিট হবে এমন কলামগুলির # গণনা করুন
• # কলামের সমান দৈর্ঘ্য সহ একটি খালি অ্যারে তৈরি করুন। লেআউটটি তৈরি করার সাথে সাথে প্রতিটি কলামের উচ্চতা সংরক্ষণ করতে এই অ্যারেটি ব্যবহার করুন, উদাহরণস্বরূপ কলাম 1 এর উচ্চতা অ্যারে হিসাবে সংরক্ষণ করা হয়েছে [0]

প্রতিটি পিনের মধ্য দিয়ে লুপ করুন:

• প্রতিটি পিনটি সংক্ষিপ্ততম কলামে যুক্ত হওয়ার মুহুর্তে রাখুন
• "বাম:" === কলাম # (সূচকের অ্যারে) কলামের প্রস্থ + মার্জিনের চেয়ে বহুগুণ বেশি
• "শীর্ষ:" === সেই সময়ের সংক্ষিপ্ততম কলামের জন্য অ্যারের মান (উচ্চতা)
• শেষ অবধি, কলামের উচ্চতায় পিনের উচ্চতা যুক্ত করুন (অ্যারের মান)

ফলাফল হালকা ওজন। ক্রোমে, 50+ পিনের পুরো পৃষ্ঠাটি রাখার জন্য 10 মিনিট সময় লাগে।

Comments

আপনি কীভাবে কলামটির উচ্চতা গণনা করতে চান? আপনি যদি জানবেন যে এর মধ্যে থাকা আইটেমগুলির সংখ্যা এবং উচ্চতা আপনি না জানেন তবে এটি কত উচ্চ হতে হবে? যে কোনও সুযোগ আপনি কিছু সিডো কোড প্রদর্শন করতে পারেন?

— মাইকেল জিওভানি পুমো

এখানে একটি কঠিন টিউটোরিয়াল - benholland.me/ javascript/…

— হল্যান্ডবেন

কোনও অনামী ব্যবহারকারীর প্রতিক্রিয়া (সম্পাদনা সারিতে পাওয়া গেছে): কৌতূহলীভাবে আমি 1 সারি এবং এন কলামগুলির সাথে একটি টেবিল তৈরি করার সামান্যতম পার্থক্য সহ jQuery তে ঠিক একই স্ক্রিপ্টটি করেছি এবং কেবল এগুলি বাম থেকে ডানে সংক্ষিপ্ততম কলামে সংযোজন করেছি অগ্রাধিকার। যদিও আমি একটি "ন্যূনতম উচ্চতা পার্থক্য" যুক্ত করেছি বাম থেকে ডানদিকে অবস্থান করার সময় একটি কলামটি প্রকৃতপক্ষে এড়াতে প্রয়োজনীয় ছিল তবে এটি বিন্যাসটিকে যথাসম্ভব উচ্চতা না ছাড়াই কালানুক্রমিক স্বজ্ঞাত প্রদর্শন করে

— ওয়ার

@ মিচেলজিওভান্নিপোমো আমার ধারণা, লেআউটের আগে উচ্চতাটি জানা উচিত (পিন্টারেস্টের ক্ষেত্রে), তাদের কোনও "প্রাথমিক" অবস্থা নেই যা ডিভগুলি একে অপরের সাথে ওভারল্যাপ করে। উচ্চতা জানা না থাকলে এটি করা যাবে না।

— ptgamr

@ হল্যান্ডবেনের লিঙ্কটি মারা গেছে, নতুন লিঙ্ক: benholland.me/ javascript

— 2012

Answer 3

আমরা একটি jQuery প্লাগইন প্রকাশ করেছি কারণ আমরা উইকমার্কের জন্য বেশ কয়েকবার একই প্রশ্ন পেয়েছি । এটি ঠিক এই ধরণের লেআউট তৈরি করে। এটি এখানে দেখুন - Wookmark jQuery প্লাগইন

Comments

এই সমাধানটি রাজমিস্ত্রির চেয়ে দ্রুত লোড হচ্ছে বলে মনে হচ্ছে

— মাইকেল এল ওয়াটসন

আপনি কোনটি ভাল খুঁজে পাচ্ছেন? বুকমার্ক না রাজমিস্ত্রি?

— রামজে

আমি এই রাজমিস্ত্রীর চেয়ে বেশি পছন্দ করি, মাইকেল যেমন বলেছিল তেমন দ্রুত মনে হয়।

— নার্ডবার্ন

Answer 4

সমস্ত বিকল্পের দিকে নজর রেখে, আমি এইভাবে পিনট্রেস্টের অনুরূপ লেআউটটি প্রয়োগ করে শেষ করেছি:

সমস্ত ডিআইভি হ'ল:

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

এটি তাদের ভাসমানের চেয়ে সারিগুলিতে আরও ভাল অবস্থানে রাখে।

তারপরে পৃষ্ঠাটি লোড হয়ে গেলে, আমি জাভাস্ক্রিপ্টের সমস্ত ডিআইভিগুলিকে তাদের মধ্যে ফাঁকগুলি সরাতে পুনরাবৃত্তি করি। এটি গ্রহণযোগ্যভাবে ভাল কাজ করে যখন:

1. ডিআইভি উচ্চতার ক্ষেত্রে খুব আলাদা নয়।
2. অর্ডার দেওয়ার ক্ষেত্রে কিছু ছোটখাটো লঙ্ঘন করতে আপনি আপত্তি করবেন না (কিছু উপাদান নীচে ছিল যা উপরে টানা যেতে পারে)।
3. আপনি নীচের লাইনটি বিভিন্ন উচ্চতার বলে মনে করেন না।

এই পদ্ধতির সুবিধা - আপনার এইচটিএমএল অনুসন্ধান ইঞ্জিনগুলির জন্য বোধগম্য, ফায়ারওয়াল দ্বারা অক্ষম করা / জাভাস্ক্রিপ্টের সাথে কাজ করতে পারে, এইচটিএমএলের উপাদানগুলির ক্রমটি লজিক্যাল সিকোয়েন্সের সাথে মেলে (পুরানো আগে নতুন আইটেমগুলি)

Comments

আরে, আপনি কি আমাকে বলতে পারবেন যে আপনি যে অফসেটটি বিয়োগ করতে হয়েছে তা কীভাবে গণনা করেছেন? এবং আপনি কীভাবে ডান পাশে থাকা শেষ উপাদানটির সমস্যাটি সমাধান করেছিলেন, কারণ এখানে একটি উপাদান রয়েছে যা কিছুটা বড় এবং সেখানে এটি ঠেলা দেয়।

— লুকাশ ওপর্মান

@ লুকাসঅপারম্যান ১) টাইলের জন্য অফসেটটি পূর্ববর্তী সারিতে একই কলামে টাইলের জন্য অফসেটের যোগফল এবং একই সারিতে সর্বোচ্চ টাইলের উচ্চতা এবং একই কলামে টাইলের উচ্চতার মধ্যে পার্থক্য পূর্ববর্তী সারিতে কটাক্ষপাত আছে dev.sheeporpig.com/news (যদি আপনি লিঙ্কটিতে ক্লিক প্রথম প্রয়োজন dev.sheeporpig.com/sheep/3210 , স্ক্রিপ্ট ফাইল - তাই আপনি পৃথক ফাইলে ডিকম্প্রেস ও মন্তব্য স্ক্রিপ্ট দেখতে পারেন উন্নয়ন সাইটে অ্যাক্সেস পেতে) স্টক_নিউজ.জেএস, ফাংশন সংক্ষেপণ টাইলস।

— esp

@ লুকাসঅপারম্যান 2) আপনি যদি উত্তর হিসাবে সিএসএস ব্যবহার করেন (বিশেষত প্রদর্শন: ইনলাইন-ব্লক) এটি ঘটে না। এটি কেবল তখনই ঘটে যখন আপনি ভেসে থাকুন: আপনার ডিভগুলি রেখে দিন। আমি ভাসা ব্যবহার করি না

— esp

Answer 5

তারা আইডিগুলি (খারাপ সমাধান ... আরও ভাল শ্রেণীর নাম ব্যবহার করে) দিয়ে কলামগুলিতে সত্ত্বাকে বিভক্ত করে এবং তারপরে কলাম দলগুলির দ্বারা অবস্থানগুলি গণনা করে

Comments

+1 তাদের উত্স কোডটি দেখুন।

— বোজ্যাঙ্গলেস

এটি আমার জন্য আকর্ষণীয় ছিল তবে আমি মনে করি কম

— জেএস

display: inline-blockআমি মনে করি আপনি ব্যবহার করতে পারেন , তবে উল্লম্ব উচ্চতার আইটেমগুলি একসাথে বসবে না।

— বোজ্যাঙ্গেলস

কলামের পাত্রে ( float:left;overflow: hidden;

— ডিভগুলি

ভাল যুক্তি. আপনি যদি সত্যিই জাভাস্ক্রিপ্টের রুটে যেতে চান তবে আপনি jQuery রাজমিস্ত্রি ব্যবহার করতে পারেন?

— বোজাঙ্গলেস

Answer 6

আপনি কেন এটিকে চেষ্টা করেন না, সাধারণ জেএস স্টাফ

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

অথবা এটি jQuery সহ এবং পাশাপাশি স্ক্রোল লোড হচ্ছে।

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

Answer 7

আপনি একবারে সর্বনিম্ন প্রস্থে পৌঁছানোর পরে ডিভিডসকে স্বয়ংক্রিয়ভাবে পতিত করতে বাধ্য করতে ন্যূনতম প্রস্থের সাথে শতাংশগুলি ব্যবহার করে আপনার ডিভ প্রস্থকে আকার দিতে পারবেন? আমরা http://www.goldtree.co.za/work এ কাজ করে চলেছি