রাজমিস্ত্রি - খাঁটি সিএসএস ব্যবহার করে ইটভাটার আকারে ব্লক। স্থান অপ্টিমাইজ করার জন্য রাজমিস্ত্রির লেআউট এই বিকল্পটির অনেক অসুবিধা রয়েছে

হাই সব! আজ আমি আপনি কিভাবে তৈরি করতে পারেন তা নিয়ে কথা বলতে চাই ব্রিকওয়ার্ক আকারে ব্লক(রাজমিস্ত্রির কাজইংরেজী থেকে - ইটওয়ার্ক), অর্থাৎ, বিভিন্ন উচ্চতার ব্লকগুলি বড় খালি জায়গা ছাড়াই একে অপরের নীচে সুন্দরভাবে স্থাপন করা হবে। হ্যাঁ! এই সব করা যায় খুব সহজে css ব্যবহার করে।

CSS-এ একটি বৈশিষ্ট্য রয়েছে যা দিয়ে আপনি বহু-কলাম পাঠ্য বা ব্লক তৈরি করতে পারেন। আমরা এটি ব্যবহার করব।

একেই বলে সম্পত্তি কলাম.এটি একটি সর্বজনীন সম্পত্তি যা আপনাকে অবিলম্বে কলামের প্রস্থ এবং সংখ্যা সেট করতে দেয়। আপনি একটি ভাল CSS রেফারেন্স বইতে এটি সম্পর্কে আরও পড়তে পারেন।

সুতরাং, এটা আসলে খুব সহজ. উদাহরণস্বরূপ, আমাদের কাছে বিভিন্ন উচ্চতার 6 টি উপাদান রয়েছে, তবে একই প্রস্থ। একটি আকর্ষণীয় উদাহরণ হল ওয়েবসাইটের সাইডবার (সাইড কলাম)। এখানে সমস্ত ব্লক একই প্রস্থ, কিন্তু ভিন্ন উচ্চতা। সাধারণত, সাইটের মোবাইল সংস্করণে, সাইডবারটি মূল বিষয়বস্তুর পরে সাইটের নীচে স্থাপন করা হয় এবং সামগ্রীটি নিজেই পর্দার পুরো প্রস্থ পূরণ করার জন্য তৈরি করা হয়। স্বাভাবিকভাবেই, একটি কলামে একটি সাইডবার স্থাপন করাও অযৌক্তিক, যেহেতু পাশে প্রচুর ফাঁকা জায়গা থাকবে, বিশেষত যখন ট্যাবলেট থেকে দেখা হয়।

কিন্তু, ব্লক দিলে সম্পত্তি দেওয়া হয় প্রদর্শন: ইনলাইন-ব্লক, তারপর তারা স্বয়ংক্রিয়ভাবে, যদি ধারকটির প্রস্থ যথেষ্ট হয়, কয়েকটি কলামে সাজানো হবে। যাইহোক, জিনিসগুলি খুব সুন্দর নাও লাগতে পারে:

সম্মত হন, ব্লকগুলির মধ্যে এই ইন্ডেন্টেশনগুলি মোটেই ভাল দেখায় না। অতএব, এটি অবিলম্বে ঠিক করা প্রয়োজন! এই জন্য কন্টেইনার ব্লকে,যেখানে ব্লকগুলি অবস্থিত, আপনাকে প্রয়োজনীয় শৈলী যোগ করতে হবে:

Moz-কলাম: 300px অটো; -ওয়েবকিট-কলাম: 300px স্বয়ংক্রিয়; কলাম: 300px স্বয়ংক্রিয়;

ক্রস-ব্রাউজার সামঞ্জস্যের জন্য, আমরা ফায়ারফক্স এবং ওয়েবকিট ব্রাউজারগুলির (Chrome, Safari, Android) বৈশিষ্ট্যগুলি ব্যবহার করি। উদাহরণস্বরূপ, আমরা একটি বুলেটেড তালিকা ব্যবহার করে ব্লকগুলি সাজাব, তারপর ছবির উদাহরণের শৈলীগুলি এইরকম দেখাবে:

Ul ( প্রস্থ: 1050px; -moz-কলাম: 300px অটো; -ওয়েবকিট-কলাম: 300px অটো; কলাম: 300px অটো; ) li ( প্রদর্শন: ইনলাইন-ব্লক; বক্স-ছায়া: 0 0 8px #555; তালিকা-শৈলী: কোনোটিই নয়; প্যাডিং: 10px; প্রস্থ: 300px; মার্জিন-নিচ: 30px; উল্লম্ব-সারিবদ্ধ: শীর্ষ; )

এই ক্ষেত্রে, ব্লকগুলি বেশ কয়েকটি কলামে সাজানো হবে সর্বনিম্ন 300px চওড়া, এবং কলামের সংখ্যা স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা নির্ধারিত হবে। এটি অভিযোজনযোগ্যতা তৈরির জন্য দরকারী। এই ক্ষেত্রে 3টি কলাম থাকবে এবং এটি দেখতে এইরকম হবে:

আপনি যদি ব্লকগুলির মধ্যে উল্লম্ব দূরত্ব অনুভূমিক দূরত্বের সাথে মিলে যেতে চান তবে আপনাকে ধারকটির প্রস্থ (1050px) নির্বাচন করতে হবে। অন্যথায়, ব্রাউজার দ্বারা কলামগুলির মধ্যে প্রস্থ স্বয়ংক্রিয়ভাবে সেট করা হবে। একটি সম্পত্তি আছে কলাম-ব্যবধান, যা কলামের মধ্যে দূরত্ব নির্দিষ্ট করে। কিন্তু এক্ষেত্রে আপনি যেভাবে চান সেভাবে কাজ করবে না।

আরেকটি বিকল্প আছে: ব্লকের জন্য আপনাকে width:100% সম্পত্তি সেট করতে হবে। এছাড়াও, যদি প্যাডিং সম্পত্তি সেট করা হয়, যেমন আমার ক্ষেত্রে, তাহলে আপনাকে বক্স-সাইজিং সেট করতে হবে: বর্ডার-বক্স সম্পত্তি। এখন আপনি কলামের মধ্যে দূরত্ব সেট করতে কন্টেনারে কলাম-গ্যাপ বৈশিষ্ট্যটি নিরাপদে যুক্ত করতে পারেন। এইভাবে এটি যেমন উচিত কাজ করবে।

একমত, এটা এই ভাবে অনেক ভাল দেখায়! আপনি একটি "div" পাত্রের ভিতরে "div" ব্লকগুলিও রাখতে পারেন। অথবা, আপনি যদি পাঠ্যটিকে কয়েকটি কলামে বিতরণ করতে চান, তাহলে কেবলমাত্র "p" ট্যাগে প্রয়োজনীয় পাঠ্য যোগ করুন, উদাহরণস্বরূপ, "টেক্সট" ক্লাস এবং এই শ্রেণীর জন্য সম্পত্তি সেট করুন কলাম.

এখানেই শেষ! তাই সহজভাবে, অপ্রয়োজনীয় স্ক্রিপ্ট ছাড়াই, আপনি বেশ কয়েকটি কলামে ইটওয়ার্ক বা পাঠ্য আকারে ব্লকগুলি সাজাতে পারেন। তবে মনে রাখবেন যে এই ক্ষেত্রে ব্লকগুলি একই প্রস্থ হলেই এটি সুন্দর দেখাবে। অন্যথায়, যা অবশিষ্ট থাকে তা হল একটি ভাল রাজমিস্ত্রি স্ক্রিপ্ট ব্যবহার করা। স্ক্রিপ্ট স্বয়ংক্রিয়ভাবে প্রতিটি ব্লকের অবস্থান করে। কিন্তু এটা অন্য বিষয়…

এখানেই শেষ! আপনার যদি কোন প্রশ্ন বা মন্তব্য থাকে, মন্তব্যে তাদের ছেড়ে. শুভকামনা!

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

এই প্লাগইনটি সহজ উপলব্ধ শর্টকোড ব্যবহার করে আপনার ব্লগগুলিকে আরও ভালভাবে অগ্রিম রাজমিস্ত্রি (গ্রিড) লেআউটে পরিবর্তন করবে।

• রাজমিস্ত্রি লেআউট ব্লগ।
• নির্দিষ্ট বিভাগ থেকে রাজমিস্ত্রি লেআউট ব্লগ।
• রাজমিস্ত্রি লেআউট কাস্টম পোস্ট টাইপ.
• পোস্টের জন্য রাজমিস্ত্রির লেআউট গ্যালারি
• সিম্পল রেসপন্সিভ গ্যালারি পপআপ সহ রাজমিস্ত্রির লেআউট।
• রাজমিস্ত্রির লেআউটের জন্য সহজ শর্টকোড ব্যবহার করা যেতে পারে।
• শর্টকোড হয় সম্পাদকে ব্যবহার করা যেতে পারে বা টেমপ্লেট ফাইলগুলিতে ব্যবহার করা যেতে পারে।

FAQ

প্লাগইন কি প্রতিটি থিমের সাথে সামঞ্জস্যপূর্ণ?

হ্যাঁ, এই প্লাগইনটি প্রতিটি বিনামূল্যের, কাস্টম এবং প্রদত্ত থিমের সাথে 100% সামঞ্জস্যপূর্ণ। এমনকি আপনি এই প্লাগইনটি ব্যবহার করতে পারেন ডিফল্ট ওয়ার্ডপ্রেস থিমকে আরও ভালো দেখতে ম্যাসনরি (গ্রিড) লেআউট থিমে পরিবর্তন করতে সহজ উপলব্ধ শর্টকোড সহ।

রাজমিস্ত্রি লেআউট প্রতিক্রিয়াশীল?

হ্যাঁ, রাজমিস্ত্রির লেআউট প্রতিক্রিয়াশীল। এতে রেস্পন্সিভ জেকুয়েরি পপআপও রয়েছে।

লগ পরিবর্তন করুন

1.3.2

• ফন্ট-অসাধারণের জন্য cdn লিঙ্ক যোগ করা হয়েছে

1.3.1

• সারিবদ্ধ স্ক্রিপ্ট এবং শৈলীতে ছোটখাট ফিক্সিং

1.3

• পেজিনেশনে ছোটখাট ফিক্সিং
• Jquery পপআপ সক্ষম বা নিষ্ক্রিয় করার জন্য সেটিং যোগ করা হয়েছে
• পার্মালিঙ্ক পোস্ট করার জন্য ফিচারড ইমেজ লিঙ্ক যোগ করা হয়েছে
• jQuery সংস্করণ দ্বন্দ্ব সমাধান করা হয়েছে
• 1.8.2 সহ ওয়ার্ডপ্রেস ডিফল্ট jQuery সংস্করণ ওভাররাইট করা হয়েছে

1.2

• নির্দিষ্ট বিভাগ থেকে রাজমিস্ত্রি লেআউট ব্লগের জন্য শর্টকোড যোগ করা হয়েছে
• পৃষ্ঠা সংখ্যা যোগ করা হয়েছে
• বহুভাষা অনুমতি যোগ করা হয়েছে

সহজ প্রতিক্রিয়াশীল Jquery পপআপ যোগ করা হয়েছে

গ্যালারিতে পোস্ট শিরোনাম URL লিঙ্ক যোগ করা হয়েছে

পোস্ট শিরোনাম URL সেটিং যোগ করা হয়েছে

স্ক্রিপ্ট সক্রিয় করা হচ্ছে jQuery রাজমিস্ত্রিওয়ার্ডপ্রেস 3.5 এর মূল লাইব্রেরিতে অন্তর্ভুক্ত করা আপনাকে আপনার সাইটের মূল পৃষ্ঠায় পোস্টগুলি প্রদর্শন করার পদ্ধতিটি সহজেই পরিবর্তন করতে দেয়। এই স্ক্রিপ্টটি আপনাকে পোস্টের দৈর্ঘ্য এবং ছবির আকার নির্বিশেষে একটি একক "ইটের দেয়াল" আকারে সমস্ত পোস্ট এবং ছবি উপস্থাপন করার অনুমতি দেয়, যা পাঠকদের কাছে সাইটটিকে আরও আকর্ষণীয় করে তোলে এবং চেহারাটির সাথেও সাদৃশ্যপূর্ণ। বর্তমানে একটি জনপ্রিয় পরিষেবা Pinterest. jQuery রাজমিস্ত্রি ব্যবহার করে, সমস্ত পোস্ট একে অপরের সাথে "সামঞ্জস্য" করে এবং মূল পৃষ্ঠায় "ফাঁকা" বা "খালি স্থান" ছাড়াই তাদের জন্য বরাদ্দ করা সম্পূর্ণ স্থান পূরণ করে। আপনার সাইটের জন্য এই চেহারা কিভাবে সেট আপ করবেন তা বের করা যাক।

ইট বিন্যাসে আউটপুট কি?

এই পোস্ট ডিসপ্লে সেটিংস সহ একটি পৃষ্ঠায় সামগ্রী প্রদর্শন করা সাদৃশ্যপূর্ণ, যেমনটি আমরা আগেই বলেছি, মূল পৃষ্ঠার সাথে Pinterest. সমস্ত পোস্ট উল্লম্বভাবে অর্ডার করা হয় এবং ফিডের জন্য বরাদ্দকৃত সমস্ত স্থান পূরণ করে। এছাড়াও আপনি ভাসমান CSS ব্যবহার করতে পারেন, তবে এই ক্ষেত্রে আপনি পৃষ্ঠায় "সাদা দাগ" এর সম্মুখীন হওয়ার ঝুঁকি নিতে পারেন, যেহেতু বিষয়বস্তু প্রথমে অনুভূমিকভাবে এবং শুধুমাত্র তারপর উল্লম্বভাবে অর্ডার করা হয়। jQuery রাজমিস্ত্রির ক্ষেত্রে, "খালি দাগের" সমস্যাটি সহজেই সমাধান করা যেতে পারে।

ফ্লোটিং সিএসএস উদাহরণ

jQuery রাজমিস্ত্রির উদাহরণ ("ইট" কাঠামো)

jQuery রাজমিস্ত্রির ক্ষেত্রে, প্রতিটি পোস্ট সামগ্রিক কাঠামোর সাথে পুরোপুরি ফিট করে এবং কোন "সাদা দাগ" নেই।

আসুন একটি jQuery ম্যাসনরি স্ক্রিপ্টের উপর ভিত্তি করে আপনার পোস্টগুলির একটি মোটামুটি সহজ প্রদর্শন তৈরি করি, যেহেতু আমরা ইতিমধ্যেই জানি যে মূল পৃষ্ঠায় পোস্টগুলি প্রদর্শনের জন্য "ইট কাঠামো" কী এবং এটি কীভাবে কাজ করে৷

ধাপ 1: লাইব্রেরি লোড করতে wp_enqueue_script ব্যবহার করুন

কাজ শুরু করার আগে, আপনাকে এই কাজের জন্য উপযুক্ত একটি স্ক্রিপ্ট ডাউনলোড করতে হবে। এটি করার জন্য, নামক একটি ফাইলে নিম্নলিখিত কোড যোগ করুন functions.php:

ফাংশন mason_script() ( wp_enqueue_script("jquery-masonry"); ) add_action("wp_enqueue_scripts", "mason_script");

ধাপ 2: গ্রিড সেট আপ করা

আমাদের কাঠামোর মূল লেআউটের জন্য, নিম্নলিখিত কোড যোগ করুন এইচটিএমএললুপে (বা টেমপ্লেটের অংশে যেখানে আমরা আমাদের "ইট প্রাচীর" ব্যবহার করার পরিকল্পনা করি)। প্রথমে, আসুন এই জাতীয় সমস্ত পোস্টের জন্য একটি সাধারণ ধারক সেট আপ করি এবং তারপর প্রতিটি পৃথক পোস্টের জন্য এই ধরণের প্রদর্শন সক্ষম করি:

CSS কাস্টমাইজ করা

আমরা যে "Pinterest-এর মতো" চেহারা চাই তা বজায় রাখতে আমাদের কন্টেইনার ব্লকের প্রস্থ এবং পৃথক পোস্টের প্রস্থও নির্দিষ্ট করতে হবে। আমাদের উদাহরণে, আমরা ব্যান্ডউইথ সেট করেছি 960 px, এবং আমরা পেতে 4 কলামএকটি প্রস্থ সঙ্গে পোস্ট 240pxপ্রতিটি পোস্টের জন্য। আমরা এই পরামিতিগুলি মনে রাখি এবং স্টাইল শীটে আউটপুট কনফিগার করি:

#কন্টেইনার (প্রস্থ: 960px; // প্রাচীরের জন্য সম্পূর্ণ পাত্রের প্রস্থ) .ইট (প্রস্থ: 220px; // প্রতিটি ইটের প্রস্থ প্যাডিংয়ের মধ্যে প্যাডিং কম: 0px 10px 15px 10px; )

ধাপ 3. ফাংশন কনফিগার করুন

JQuery(ডকুমেন্ট)।রেডি(ফাংশন($) ( $("#কন্টেইনার")।ম্যাসনরি(( কলাম প্রস্থ: 220 )); ));

উপসংহার

ওয়ার্ডপ্রেসের মধ্যে এই স্ক্রিপ্টটি ব্যবহার করার জন্য রাজমিস্ত্রি অনেক অন্তর্নির্মিত বিকল্পের সাথে আসে। উদাহরণস্বরূপ, আপনি আপনার পোস্টগুলিকে "পুনরুজ্জীবিত" করতে অ্যানিমেশন প্রভাব প্রয়োগ করতে পারেন, "দেয়ালে" অতিরিক্ত সেটিংস যোগ করতে পারেন এবং একটি নির্দিষ্ট ক্রমে সামগ্রীর আউটপুট সাজাতে পারেন, অথবা এই স্ক্রিপ্টটি ব্যবহার করতে পারেন ইনফিনিটি স্ক্রোল . আপনি jQuery ম্যাসনরি স্ক্রিপ্টটি যেভাবে ব্যবহার করুন না কেন, এটি ওয়ার্ডপ্রেস 3.5-এ যোগ করা খুবই ভালো।

আপনি কি এমন সাইটগুলিতে এসেছেন যেখানে বিভিন্ন আকারের ব্লকগুলি একটি পাত্রে প্রদর্শিত হয়, যতটা সম্ভব দক্ষতার সাথে স্থানটি পূরণ করে?

ডেভিড এর DeSandro স্ক্রিপ্ট, যা বলা হয় রাজমিস্ত্রির কাজ(ইংরেজি ইটওয়ার্ক থেকে)। আপনি স্ক্রিপ্টের অফিসিয়াল ওয়েবসাইটে একটি স্পষ্ট উদাহরণ দেখতে পারেন। বন্ধ. ওয়েবসাইটে আপনি ইংরেজিতে সম্পূর্ণ ডকুমেন্টেশন পাবেন।

রাজমিস্ত্রি হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনাকে এইচটিএমএল ব্লকগুলিকে কমপ্যাক্ট, ভাঁজ আকারে প্রদর্শন করতে দেয়। স্ক্রিপ্ট প্রতিটি ব্লকের উচ্চতা বিশ্লেষণ করে এবং যতটা সম্ভব স্থান সংরক্ষণ করে।

সম্ভবত কেউ এটি সম্পর্কে দীর্ঘদিন ধরে শুনেছে এবং এমনকি তাদের প্রকল্পগুলিতে এটি ব্যবহার করেছে, তবে আমি সম্প্রতি এটি প্রথমবারের মতো দেখতে পেয়েছি। আমি বলতে পারি না যে সবাই সহজে কোন উপসংহার টানতে পারে। কিন্তু আমি মনে করি সবাই মৌলিক ব্যবহার পরিচালনা করতে পারে। এটি সেখানে কী এবং কীভাবে কাজ করে তা বের করা এত সহজ নয়, তবে আমি এটাও বলতে পারি না যে এটি খুব কঠিন। আপনি যদি JS তে পারদর্শী হন তবে যে কোনও আউটপুট কাজ করা উচিত। এই পোস্টের উদ্দেশ্য হল আপনাকে রাজমিস্ত্রির সাথে পরিচয় করিয়ে দেওয়া এবং নিজের জন্য এটি সম্পর্কে একটি নোট রেখে দেওয়া।

রাজমিস্ত্রির কাজলাইব্রেরি ব্যবহার না করে স্বাধীনভাবে কাজ করে, তবে এটি হিসাবেও ব্যবহার করা যেতে পারে jQueryপ্লাগ লাগানো

এই পোস্টে আমি অফ-সাইটের মূল পৃষ্ঠাটি অনুবাদ করব, যা ব্যাখ্যা করে কিভাবে স্ক্রিপ্টের সাথে কাজ শুরু করতে হয়।

জাভাস্ক্রিপ্টে রাজমিস্ত্রি

রাজমিস্ত্রির সংযোগ

এই ইনস্টলেশন প্যাকেজগুলিতে আপনার রাজমিস্ত্রি ব্যবহার করার জন্য প্রয়োজনীয় সমস্ত কিছু রয়েছে:

• ফাংশন mason_script() ( // wp_register_script("ম্যাসনরি", "/path/to/masonry.pkgd.min.js"); // শীর্ষ লাইনের প্রয়োজন নেই কারণ ওয়ার্ডপ্রেস ডিফল্টভাবে রাজমিস্ত্রির সাথে আসে, তাই আপনি কেবল সংযোগ করতে পারেন এটা। wp_enqueue_script("ম্যাসনরি"); ) add_action("wp_enqueue_scripts", "mason_script");

  এইচটিএমএল

  গাঁথনি একই আইটেম শ্রেণীর ধারক উপাদানগুলির সাথে কাজ করে:

  ...

  ...

  ...

  ...

  আপনি যে কোনও ক্লাস নির্দিষ্ট করতে পারেন, প্রধান জিনিসটি কল করার সময় আইটেম সিলেক্টর বিকল্পটি নির্দিষ্ট করা: ". আইটেম"।

  সিএসএস

  কন্টেইনার ব্লকের জন্য, আপনাকে প্রস্থ নির্দিষ্ট করতে হবে। প্রস্থ অবশ্যই ধারক এবং কলাম প্রস্থ প্যারামিটার (কলাম প্রস্থ) অনুযায়ী নির্বাচন করতে হবে:

  আইটেম ( প্রস্থ: 25%; ) .item.w2 ( প্রস্থ: 50%; )

  রাজমিস্ত্রি সক্ষম করা (শুরু করা)

  স্ক্রিপ্টটি কাজ শুরু করার জন্য, এটি আমাদের কন্টেইনারে প্রয়োগ করা দরকার। বিশুদ্ধ জাভাস্ক্রিপ্টে একটি উদাহরণ হিসাবে স্ক্রিপ্ট চালানো এটি করে:

  Var ধারক = document.querySelector("#container"); var msnry = নতুন রাজমিস্ত্রি (ধারক, ( // সেটিংস কলাম প্রস্থ: 200, আইটেম নির্বাচক: ". আইটেম" ));

  এই ক্ষেত্রে, ইনস্ট্যান্স কনস্ট্রাক্টরে 2টি আর্গুমেন্ট রয়েছে: কলামের প্রস্থ (কলামের প্রস্থ) এবং আইটেম সিলেক্টর (পাত্রের ব্লকের ক্লাস যা ম্যাসনরি কাজ করবে)। এগুলি সব বিকল্প নয়, বাকিগুলি ডকুমেন্টেশনে বা নীচে এই পৃষ্ঠায় দেখুন৷

  HTML এর মাধ্যমে সূচনা

  জাভাস্ক্রিপ্ট ব্যবহার না করেই সরাসরি এইচটিএমএল থেকে, পাত্রে js_masonry ক্লাস নির্দিষ্ট করে এবং data-masonry-options অ্যাট্রিবিউটে বিকল্পগুলি উল্লেখ করে রাজমিস্ত্রি চালু করা যেতে পারে:

  HTML-এ সেট করা বিকল্পগুলি অবশ্যই JSON ফর্ম্যাটে হতে হবে। আর্গুমেন্ট অবশ্যই উদ্ধৃতিতে হতে হবে "itemSelector": দয়া করে মনে রাখবেন যে HTML অ্যাট্রিবিউটের মান অবশ্যই একক উদ্ধৃতিতে থাকতে হবে " কারণ JSON বৈশিষ্ট্য ডবল উদ্ধৃতি ব্যবহার করে"।

  jQuery এর মাধ্যমে সূচনা

  রাজমিস্ত্রি ব্যবহার করার জন্য আপনার jQuery এর প্রয়োজন নেই, তবে আপনি যদি jQuery এর সাথে কাজ করতে আরও স্বাচ্ছন্দ্যবোধ করেন তবে রাজমিস্ত্রি এটির সাথে একটি প্লাগইন হিসাবে কাজ করে।

  Var $container = $("#container"); // ইনিশিয়ালাইজেশন $container.masonry(( columnWidth: 200, itemSelector: ".item" ));

  উদাহরণ পেতে .data("ম্যাসনরি") পদ্ধতি ব্যবহার করুন:

  Var msnry = $container.data("ম্যাসনরি");

  ইমেজ ব্লক জন্য সূচনা

  যেহেতু ছবিগুলি এইচটিএমএল কোড থেকে আলাদাভাবে লোড করা হয়, তাই একটি ছবির সাথে ব্লকগুলির জন্য "ম্যাসনরি" ব্যবহার করা সাধারণত একটি ত্রুটির কারণ হয় - একটি ব্লক অন্যটিকে ওভারল্যাপ করে৷ এটি ঘটে কারণ ব্লকের চিত্রটি লোড হওয়ার আগে রাজমিস্ত্রি ফায়ার করে, ব্লকের উচ্চতা সেট করা হয় এবং তারপরে ছবিটি এই উচ্চতাটিকে "ধ্বংস" করে। এই সমস্যা সমাধানের বিভিন্ন উপায় আছে:

  পদ্ধতি 1

  সমস্ত ছবির জন্য কঠোর মাত্রা সেট করুন: পিক্সেলে প্রস্থ এবং উচ্চতা।

  পদ্ধতি 2

  লোড ইভেন্ট উপর রাজমিস্ত্রি প্রক্রিয়াকরণ হ্যাং. jQuery কোড:

  JQuery(উইন্ডো)।লোড(ফাংশন())( jQuery(.ম্যাসনরি")।ম্যাসনরি(( columnWidth:310, itemSelector:."box, .item" )); ));

  এই পদ্ধতির অসুবিধা হল যে আপনাকে সম্ভবত সম্পূর্ণ "উইন্ডো" লোড করার জন্য অপেক্ষা করতে হবে: jQuery(উইন্ডো) লোড। একা একটি উপাদানের উপর লোড ব্যবহার করা খুব কমই গ্রহণযোগ্য কারণ jQuery এটিকে AJAX লোড ফাংশন হিসাবে ব্যাখ্যা করবে। এটি এড়াতে, 3য় উদাহরণ ব্যবহার করুন।

  পদ্ধতি 3

  সমস্ত ছবি লোড হওয়ার পরে রাজমিস্ত্রির কাজ শুরু করুন। এবং লোডিং পরীক্ষা করতে, অতিরিক্ত JS স্ক্রিপ্ট imagesLoaded ব্যবহার করুন। কোড:

  Var ধারক = document.querySelector("#container"); var msnry; // ইমেজ ইমেজ লোড করার পরে, রাজমিস্ত্রি শুরু করুন লোডড(কন্টেইনার, ফাংশন() ( msnry = নতুন রাজমিস্ত্রি(ধারক); ));

  jQuery কোড:

  Var $container = $("#container"); // ইমেজ লোড করার পরে রাজমিস্ত্রি শুরু করুন $container.imagesLoaded(function() ( $container.masonry(); ));

  দ্রষ্টব্য: অতিরিক্ত ফন্ট ব্যবহার করার সময়ও একটি ত্রুটি ঘটতে পারে, তাই আপনাকে ফন্টের লোডিং পরীক্ষা করতে হবে।

  বৈশিষ্ট্য

  প্রয়োজনীয় বৈশিষ্ট্যগুলি হল: columnWidth এবং itemSelector। অন্য সব পছন্দসই হিসাবে ব্যবহার করা যেতে পারে:

  আইটেম নির্বাচক (স্ট্রিং) (প্রয়োজনীয়)রাজমিস্ত্রি নির্মাণের সময় পাত্রের কোন শিশু উপাদান ব্যবহার করা হবে তা নির্ধারণ করে। উপাদানটি অবশ্যই নির্দিষ্ট করতে হবে অন্যান্য ধারক উপাদানগুলিকে বাদ দিতে যা আকার সেট করতে ব্যবহৃত হয় "কলামবিশিষ্ট" দেখুন: ".গ্রিড-সাইজার"।
  ডিফল্ট: নাকলাম প্রস্থ (একটি স্ট্রিং হিসাবে সংখ্যা/উপাদান/নির্বাচক) (প্রয়োজনীয়)পিক্সেলে কলামের প্রস্থ: "columnWidth": 60। আপনি যদি একটি নির্বাচক বা উপাদান সেট করেন, রাজমিস্ত্রি সেট উপাদানটির প্রস্থ ব্যবহার করবে: "columnWidth": ".gutter-sizer"। রাজমিস্ত্রি CSS বৈশিষ্ট্যের সীমানা, প্যাডিং, মার্জিন বিবেচনা করে ব্লকের বাহ্যিক প্রস্থ গণনা করে।
  ডিফল্ট: নাধারক শৈলী (একটি বস্তু) CSS শৈলী যা কন্টেইনারে প্রয়োগ করা হয়। একটি পাত্রে রাজমিস্ত্রির শৈলীর প্রয়োগ বাতিল করতে, ধারক শৈলী নির্দিষ্ট করুন: নাল
  ডিফল্ট: ( অবস্থান: "আত্মীয়")নর্দমা (একটি স্ট্রিং হিসাবে সংখ্যা/উপাদান/নির্বাচক)উপাদানগুলির মধ্যে স্থান, মার্জিন-ডানের অনুরূপ৷ উদাহরণ: "গটার": 10
  ডিফল্ট: 0লুকানো স্টাইল (একটি বস্তু)লুকানো উপাদানগুলিতে প্রয়োগ করা শৈলী।
  ডিফল্ট: ( অস্বচ্ছতা: 0, রূপান্তর: "স্কেল(0.001)") isFitWidth (যৌক্তিক)কন্টেইনার উপাদানগুলির প্রস্থ থেকে গণনা করা কলামের উপলব্ধ সংখ্যায় কন্টেইনারের প্রস্থ সেট করে। একবার সেট হয়ে গেলে, আপনি CSS এর মাধ্যমে ধারকটিকে কেন্দ্র করতে পারেন। নোট:ধারক উপাদানগুলির প্রস্থ % এ সেট করা থাকলে এই বৈশিষ্ট্যটি কাজ করে না, এটি পিক্সেলে হওয়া দরকার: প্রস্থ: 120px। এছাড়াও, বিকল্প কলাম প্রস্থএকটি নির্দিষ্ট মান সেট করা উচিত, উদাহরণস্বরূপ: columnWidth: 120।
  ডিফল্ট: মিথ্যা isInitLayout (যৌক্তিক)আরম্ভ করার সময় ব্লক টিউনিং সক্ষম করে। সূচনা করার পরে স্ক্রিপ্টটিকে একটি ইট তৈরি করা থেকে আটকাতে মিথ্যাতে সেট করুন, যাতে আপনি ধারক উপাদানগুলি প্রক্রিয়া করার আগে পদ্ধতিগুলি ব্যবহার করতে এবং ইভেন্টগুলি যোগ করতে পারেন৷
  ডিফল্ট: সত্য isOriginLeft (যৌক্তিক)ব্লকের অনুভূমিক বিন্যাস নিয়ন্ত্রণ করে। ডিফল্টরূপে, ব্লকগুলি বাম থেকে ডানে সাজানো হয়। ডান থেকে বামে ব্লক সাজাতে মিথ্যা সেট করুন।
  ডিফল্ট: সত্য isOriginTop (যৌক্তিক)ব্লকের উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। ডিফল্টরূপে, ব্লকগুলি উপরে থেকে নীচে সাজানো হয়। মিথ্যা সেট করুন যাতে ব্লকগুলি নীচে থেকে উপরে সাজানো হয়।
  ডিফল্ট: সত্যরিসাইজবাউন্ড (যৌক্তিক)উইন্ডোর আকার পরিবর্তনের সাথে ব্লকের অবস্থান লিঙ্ক করে।
  ডিফল্ট: সত্যছাপ (উপাদান/উপাদানের অ্যারে/স্ট্রিং নির্বাচক/নোডলিস্ট)আউটপুট চলাকালীন কোন ব্লকগুলিকে প্রতিশ্রুতিবদ্ধ করতে হবে তা নির্ধারণ করে। এগুলি বিশেষ উপাদান যার জন্য রাজমিস্ত্রির প্রভাব প্রয়োগ করা হবে না। "স্ট্যাম্প": ".স্ট্যাম্প"
  ডিফল্ট: নারূপান্তর সময়কাল (লাইন)পরিবর্তনের সময়কাল (অ্যানিমেশন গতি) যখন ব্লক অবস্থান পরিবর্তন করে বা প্রদর্শিত হয়। CSS এর জন্য সময় বিন্যাসে সেট করা প্রয়োজন। সমস্ত অ্যানিমেশন বাতিল করতে 0 এ সেট করুন: ট্রানজিশন সময়কাল: 0
  ডিফল্ট: "0.4s"দৃশ্যমান শৈলী (একটি বস্তু)লুকানো উপাদান দেখানোর সময় যে শৈলী প্রয়োগ করা হবে।
  ডিফল্ট: ( অস্বচ্ছতা: 1, রূপান্তর: "স্কেল(1)")

  বিশুদ্ধ CSS মধ্যে রাজমিস্ত্রি

  সম্প্রতি, প্রায় সব ব্রাউজার CSS কলাম-গণনা বৈশিষ্ট্য বোঝে।

  এবং যদি তাই হয়, তাহলে জাভাস্ক্রিপ্ট সংযোগ করার আর প্রয়োজন নেই এবং আপনি বিশুদ্ধ CSS ব্যবহার করে রাজমিস্ত্রি ব্লক তৈরি করতে পারেন। অবশ্যই, এই বিকল্পটি সেটিংসে কম নমনীয়, তবে এটি ইনস্টল করা অনেক সহজ এবং দ্রুত এবং বোঝা সহজ।

  বিন্দু এই.

  আমাদের এই HTML কোড আছে:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  ...

  ...

  ...

  এবং আমরা এটির জন্য নিম্নলিখিত CSS শৈলীগুলি সংযুক্ত করি:

  /* রাজমিস্ত্রির ব্লকের ধারক */ .ম্যাসনরি ( কলাম-গণনা: 4; // কয়টি কলাম প্রয়োজন? কলাম-ব্যবধান: 1em; // ব্লকের মধ্যে ফাঁক (ডান বা বাম) /* প্রয়োজনীয় উপসর্গগুলির সাথে একই 18 মার্চ, 2016 এর * / -ওয়েবকিট-কলাম-গণনা: 4; -মোজ-কলাম-গণনা: 4; কলাম-গণনা: 4; -ওয়েবকিট-কলাম-ব্যবধান: 1em; -মোজ-কলাম-ব্যবধান: 1em; কলাম -গ্যাপ: 1em; ) /* রাজমিস্ত্রির ব্লক */ .masonry .item ( প্রদর্শন: ইনলাইন-ব্লক; // গুরুত্বপূর্ণ! প্রস্থ: 100%; // গুরুত্বপূর্ণ! মার্জিন-নিচ: 1em; ব্যাকগ্রাউন্ড-রং: #eee; )

  এই বিকল্পের অনেক অসুবিধা আছে

  আসুন এই পদ্ধতির অসুবিধাগুলি এবং এটি কীভাবে রাজমিস্ত্রির চেয়ে নিকৃষ্ট তা জেনে নেওয়া যাক।

  ব্রাউজার সমর্থন আজ চমৎকার (2016), কিন্তু এখনও সম্পূর্ণ নয়...

  যেকোনো অ্যানিমেশন ম্যানুয়ালি সম্পন্ন করতে হবে।

  কলাম-গণনার প্রধান অসুবিধা এবং প্রকৃতপক্ষে, বেশিরভাগ ক্ষেত্রে রাজমিস্ত্রির পরিবর্তে এই পদ্ধতিটি কেন ব্যবহার করা যায় না তার কারণ হল ব্লকগুলির দিকনির্দেশ।

  যদি রাজমিস্ত্রি অনুভূমিকভাবে পড়ে:
  1 2 3
  4 5 6

  তারপর উল্লম্বভাবে কলাম-গণনায়:
  1 3 5
  2 4 6

  কালানুক্রমিক দৃষ্টিকোণ থেকে এই পদ্ধতি ব্যবহার করা একটি বিকল্প নয়।

  
  

  বিষয়ের উপর নিবন্ধ

  নিরাময় এবং জাদুকরী মন্ডল

  বানান টেবিল লবণ ব্যবহার করে বাহিত

  প্রার্থনার মাধ্যমে পরিষ্কার করা এবং যাদুকর ভিটালির দিকে ফিরে যাওয়ার সুবিধাগুলি বানান নিরাময়ের জন্য সঠিক প্রার্থনার গুরুত্ব

  দেহের বাইরে আত্মার জীবন। জীবনের মাঝে আত্মা। মৃত্যুর আগে এবং মৃত্যুর মুহুর্তে মানুষের আত্মার কী ঘটে মৃত্যুর পরে মানুষের আত্মা সম্পর্কে সবকিছু

  অমীমাংসিত প্রত্নতাত্ত্বিক রহস্য প্রত্নতত্ত্ব বাস্তবে বৈজ্ঞানিক রহস্য গোপন করে

  একটি স্ট্যাম্প আছে এবং কে স্টাফিং সময়সূচী স্বাক্ষর করে?