Გამარჯობა ყველას! დღეს მინდა გითხრათ, თუ როგორ გარეშე plugins და სკრიპტები გავაკეთოთ აგურის ქვისა ბლოკები(ქვისა. ინგლისურიდან - აგურის ქვისა), ანუ, სხვადასხვა სიმაღლის ბლოკები ერთმანეთს ლამაზად უბიძგებენ. დიახ! ყველა ეს შეიძლება გაკეთდეს ძალიან ადვილად CSS.
CSS- ს აქვს ქონება, რომელთანაც შეგიძლიათ შექმნათ multicolong ტექსტი ან ბლოკები. ისინი იყენებენ მას.
ქონება ეწოდება Სვეტები. ეს არის უნივერსალური ქონება, რომელიც საშუალებას გაძლევთ დაუყოვნებლივ დააყენოთ სიგანე და სვეტების რაოდენობა. მეტი ამის შესახებ შეგიძლიათ წაიკითხოთ კარგი CSS. დირექტორია.
ასე რომ, ყველაფერი ძალიან მარტივია. მაგალითად, ჩვენ გვაქვს 6 ელემენტი სხვადასხვა სიმაღლეებზე, მაგრამ იგივე სიგანე. ნათელი მაგალითია sidebar (გვერდითი სვეტი) საიტებზე. არსებობს ყველა ბლოკები იმავე სიგანე, მაგრამ სხვადასხვა სიმაღლეებზე. ჩვეულებრივ ბ პორტალის მობილური ვერსია Sitebar საიტი შემდეგ ძირითადი შინაარსი, ბოლოში საიტი, და შინაარსი თავად იღებს მთელ სიგანეს ეკრანზე. ბუნებრივია, საიტი ასევე ირაციონალურია ერთ სვეტში, რადგან მხარეებს უამრავი თავისუფალი ადგილი იქნება, განსაკუთრებით მაშინ, თუ პლანშეტს უყურებ.
მაგრამ თუ ბლოკები ქონებას ქმნიან ჩვენება: Inline-Block, მაშინ ისინი ავტომატურად, თუ არსებობს საკმარისი სიგანე კონტეინერი, განთავსდება რამდენიმე სვეტში. თუმცა, ყველაფერი არ შეიძლება ძალიან ლამაზი იყოს:
ვეთანხმები, ეს შინაარსი შორის ბლოკები არ უყურებს ყველა. ამიტომ, სასწრაფოდ უნდა იყოს ფიქსირებული! Ამისთვის კონტეინერის ბლოკში,რომელი ბლოკები მდებარეობს, თქვენ უნდა დაამატოთ საჭირო სტილები:
მოზ-სვეტები: 300px ავტო; -თებკიტ-სვეტები: 300px ავტო; სვეტები: 300px ავტო;
ჯვარედინი ბრაუზერი, გამოიყენოთ თვისებები Firefox და WebKit ბრაუზერები (Chrome, Safari, Android). მაგალითად, ჩვენ ვართ ბლოკებით აღინიშნა სია შემდეგ სტილის მაგალითზე სურათზე გამოიყურება:
UL (სიგანე: 1050px; Padding: 10px; სიგანე: 300px; ზღვარი-ქვედა: 30px; ვერტიკალური გასწორება: ზედა;)
ამ შემთხვევაში, ბლოკები განთავსდება რამდენიმე სვეტში. მინიმალური 300px სიგანე, და სვეტების რაოდენობა ავტომატურად განისაზღვრება ბრაუზერის მიერ. მოსახერხებელია ადაპტაციის შექმნა. -ში ეს საქმე იქნება 3 სვეტი, და ასე გამოიყურება:
კონტეინერის სიგანე (1050px) უნდა შეარჩიო თუ გვინდა, თუ გვინდა მანძილი ვერტიკალურ ბლოკებს შორის დაემთხვა მანძილი ჰორიზონტალურად. წინააღმდეგ შემთხვევაში, დინამიკებს შორის სიგანე ავტომატურად დამონტაჟდება ბრაუზერის მიერ. აქვს ქონება სვეტი-უფსკრულირომელიც ადგენს სვეტების მანძილს შორის. მაგრამ ამ შემთხვევაში ის არ იმუშავებს, როგორც გსურთ.
არსებობს კიდევ ერთი ვარიანტი: ბლოკებისთვის საჭიროა სიგანე ქონების მითითება: 100%. ასევე, თუ padding ქონება დამონტაჟებულია, როგორც ჩემი შემთხვევაში, თქვენ უნდა დააყენოთ ყუთი sizing ქონება: სასაზღვრო ყუთი. ახლა თქვენ შეგიძლიათ უსაფრთხოდ დაამატოთ სვეტი-უფსკრული ქონება კონტეინერში სვეტების მანძილზე. ასე რომ, ეს საჭიროებს იმუშავებს.
ვეთანხმები, ბევრად უკეთესია! თქვენ ასევე შეგიძლიათ განათავსოთ "div" ბლოკები div კონტეინერის შიგნით. ან, თუ თქვენ უნდა გაავრცელოთ ტექსტი რამდენიმე სვეტში, უბრალოდ "P" tag ერთად, მაგალითად, ტექსტის კლასი დაამატოთ სასურველი ტექსტი და ამ კლასის ჩვენ განსაზღვრავთ ქონებას Სვეტები..
Სულ ეს არის! ასე რომ, უბრალოდ არასასურველი სკრიპტების გარეშე, თქვენ შეგიძლიათ განათავსოთ ბლოკები აგურის ან ტექსტის სახით რამდენიმე სვეტში. მაგრამ გაითვალისწინეთ, რომ ამ შემთხვევაში ეს მხოლოდ ლამაზია, თუ ბლოკები იგივე სიგანეა. სხვა შემთხვევაში, რჩება მხოლოდ კარგი ქვის სკრიპტის გამოყენება. სკრიპტი ავტომატურად პოზიციონირებს თითოეულ ბლოკს. მაგრამ ეს არის კიდევ ერთი თემა ...
Სულ ეს არის! თუ ზოგიერთი კითხვა ან კომენტარი გამოჩნდა, დატოვეთ კომენტარი. Წარმატებები!
ბლოგის სექციაში. Ეს სურათი wordPress თემა ეს იქნება ჩვენი მაგალითი, მაგრამ თქვენ ალბათ მინახავს jQuery ქვისა და სხვა WordPress საიტებზე.
რა არის jQuery mansory
ქვისა შეიძლება ჩაითვალოს CSS- ის გარდა, რომელთანაც შეგიძლიათ აირჩიოთ ელემენტები ჰორიზონტალურად, ვერტიკალურ მდგომარეობაში მონიტორის სიგანეზე დამოკიდებულია. შედეგად, სხვადასხვა სიმაღლის ელემენტებს შორის ვერტიკალური ხარვეზები მინიმუმამდეა. თუ გინდა ამის გაკეთება cSS დახმარება, მერწმუნეთ, თქვენ გექნებათ ბევრი თავის ტკივილი.
ამ მაგალითზე, თქვენ შეგიძლიათ იხილოთ jQuery ქვისა სამუშაო პრინციპი ადრე და გამოყენების შემდეგ:
როგორ ხედავთ შედეგს სახეზე, თუ იყენებთ CSS float: მარცხენა, მაშინ ცარიელი ინტერვალით, თქვენ უნდა გამოიყენოთ CSS პოზიცია, რომელიც საკმაოდ პრობლემატურია, შეგიძლიათ, მაგრამ რატომ, ეს ხელს შეუწყობს ქვისა დაეხმარება.
ჩვენ ვიყენებთ jQuery Mansory on WordPress საიტები
ქვისა შეიძლება გამოყენებულ იქნას ორ შემთხვევაში. პირველი არის, როდესაც ყველა თქვენი ბლოკები ინფორმაცია არის იგივე სიგანე, ამ შემთხვევაში თქვენ უნდა გამოვიყენოთ ეს ნაჭერი სცენარი:
|
თუ თქვენ გაქვთ სხვადასხვა სიგანე ბლოკები, თქვენ უნდა გამოვიყენოთ შემდეგი კოდი:
|
სად solumnwidth. ეს არის ქსელის სიგანე (პიქსელებში). ქვისა მოჰყვება ამ ორ წესს:
- ელემენტების საერთო სიგანე (გამოითვლება ამ ფორმულის მიხედვით) \u003d CSS სიგანე + padding-right + padding-left + სასაზღვრო-მარჯვენა სიგანე + სასაზღვრო მარცხენა სიგანე + ზღვარი მარჯვნივ + ზღვარი მარცხნივ
- ColumnWidth- ის გამოყენებისას ყველა ელემენტი უნდა იყოს მოწყობილი ჰორიზონტალურად ColumnWidth- ის სიგანეზე (მაგალითად, ColumnWidth: 200, ელემენტი დაიწყება 0 ან 200 ან 400 პიქსელით და ა.შ.). ეს არ შეიძლება იყოს სრულიად ნათელი, მაგრამ ამით არაფერია რთული, ჩვენ ვხედავთ სურათს.
190px და margin-right- ის მთლიანი სიგანე პირველი ელემენტი: 0. და მეორე ელემენტს აქვს ზღვარი მარცხნივ: 0, თეორიულად, ეს ორი ელემენტი ერთმანეთს უნდა შეეხოს. მაგრამ მას შემდეგ, რაც ColumnWidth- ს აქვს 200px ღირებულება, მაშინ მეორე ელემენტს იწყებს 200PX- ის მანძილის ჩვენება.
ეს პროცესი არ მოხდება, თუ ჩვენ არ გვაქვს სკრიპტის ღირებულება და ყველა ელემენტი ერთმანეთთან იწყება, ამიტომ აუცილებელია მათ ზღვარი.
ასე რომ, სასწაულები jQuery ქვისა და WordPress 3 ..
ახლა მე encode პატარა. დასაწყისისთვის, დაკავშირება საჭირო jQuery და ქვისა ბიბლიოთეკების header.php ფაილი. Skip ეს კოდი header.php (შეგიძლიათ ჩამოტვირთოთ თქვენ Off საიტზე):
/ / დაკავშირება jQuery/ / დაკავშირება ქვისა
დარწმუნდით, რომ wp_enqueue_script დგას wp_head. ქვისა სკრიპტი მდებარეობს ჩემი თემის JS საქაღალდეში, თქვენ შეიძლება ჰქონდეთ განსხვავებული სახელი.
< div id = "content_masonry" > < div class = "masonry_box" > < ! -- post content -- > < / div > < div class = "masonry_box" > < ! -- post content -- > < / div > . . . < / div > < ! -- #content_masonry--> |
Div id \u003d "content_masonry" მოვუწოდებთ ქვისა სკრიპტს და div კლასის \u003d "Masonry_box" გამოჩნდება ჩვენი პოსტი სკრიპტის გამოყენებით. ახლა CSS, შეგიძლიათ გააკეთოთ content_maasonry მაგალითად სიგანე 100%, მაშინ არ უნდა მკურნალობა, მაგრამ თუ თქვენ გააკეთებთ ფიქსირებული სიგანე content_masonry, თქვენ უნდა გააკეთოთ საჭირო გათვლები. მაგალითად, თქვენ გააკეთებთ 4 სვეტს პოსტებთან, თითოეულს აქვს სიგანე + padding 190px და margin-right: 10px, მაშინ content_maasonry კონტეინერის კონტენტის ზომა 200 x 4 \u003d 800px იქნება:
#Content_masonry (სიგანე: 800px;) #content_masonry .მასონიმრეწველობა (სიგანე: 170px; padding: 10px; margin-right: 10px; ზღვარი-ქვედა: 10px;)
#Content_masonry ( სიგანე: 800px; #Content_masonry .მასონიონი_ სიგანე: 170px; padding: 10px; ზღვარი მარჯვნივ: 10px; ზღვარი ქვედა: 10px; |
ახლა ის რჩება PHP- ს დამატება, რომელიც HTML- ს გენერირებას მოახდენს, ამ შემთხვევაში მე გამოვიყენებ WP_Query- ს, მაგალითად, ქვისაგან 20 პოსტიდან, მაგალითად, გვერდზე, მაგალითად, გვერდზე (Page.php):
< div id = "content_masonry" > $ Linksposts \u003d ახალი wp_query (); $ Linksposts -\u003e შეკითხვის ("showposts \u003d 20 & cat \u003d 10"); have_posts ()): $ linksposts -\u003e the_post (); \u003e < div class = "masonry_box" > < div class = "masonry_box_inner" > < h2 > < a href = " ID, "URL", ჭეშმარიტი)) echo get_post_meta ($ post -\u003e ID, URL, TRUE); სხვა the_permalink (); ?\u003e "> < / a > < / h2 > |
კარგი დღე ყველასთვის! ეს არის ჩემი მეორე სტატია წელს. მე გამოქვეყნდა პირველი ხატი შრიფტის შესახებ ცოტა ხნის წინ და მოხარული ვარ, რომ მე აღმოვაჩინე დრო, რომ მეორე სტატიის წერა ასეთი პატარა ზღვარი. ჯერჯერობით, ჩემთვის ეს პატარა ხარვეზია, რადგან უფრო ხშირად წერენ შესაძლებლობა, მაგრამ მე ვცდილობ. 😎 და ახლა მოდით გაუმკლავდეთ რა განიხილება ამ სტატიაში.
ალბათ ბევრ თქვენგანს მინახავს საიტებზე ელემენტების ადგილმდებარეობა (სურათები, სტატიები, სხვადასხვა ბლოკები) აგურის ეფექტი. თქვენ ამბობთ - შესაძლებელია CSS- ის მეშვეობით? იქნებ ეს შესაძლებელია, მაგრამ მხოლოდ ასეთი მოქნილობა არ იქნება. სკრიპტი თავად აყენებს ელემენტებს გვერდზე ვერტიკალური სივრცის გამოყენებით. ასევე, როდესაც პოზიციონირების ბლოკები, სკრიპტი დასძენს ანიმაციას. შესაძლებელია ადაპტირებადი დიზაინის დამნაშავე, ბრაუზერის ფანჯრის შემცირება. ასე რომ, ეს ყველაფერი მიღწეულია პატარა JavaScript ბიბლიოთეკაში - ქვისა. ეს სკრიპტი ძალიან ფართოდ გამოიყენება თანამედროვე ტენდენციურ დიზაინებში. მე არ ვიცი, როგორ რუსულ-პაგანში, მაგრამ გადაჭარბებული ინტერნეტ ქვისა დიდი პოპულარობით სარგებლობდა.
ავტორი ქვისა ამერიკის შეერთებული შტატების დავით Desandro არის. მინდა გითხრათ, რომ დიდი მადლობა გადაგიხადოთ ასეთი კარგი სცენარისთვის. ეს ბიბლიოთეკა სრულიად უფასოა, ასე რომ თქვენ შეგიძლიათ უსაფრთხოდ გამოიყენოთ თქვენი ვებ-გვერდი.
მე ვფიქრობ ბევრი მომეწონა. სინამდვილეში ყველაფერი ძალიან კარგია. მოდით გაუმკლავდეთ, თუ როგორ უნდა ვიმუშაოთ ქვისა, თუ როგორ უნდა მოვიყვანოთ ჩვენი ბლოკები ჩვენს საიტზე აგურის ეფექტით?
სტატიის სტრუქტურა
პირველი, ჩვენ უნდა წავიდეთ სკრიპტის გვერდზე - http://maasonry.desandro.com და ჩამოტვირთოთ უახლესი ვერსია. ამ სტატიის წერის დროს, ეს ვერსია 4.0. ასევე ამ საიტზე თქვენ იხილავთ დეტალურ დოკუმენტაციას ინგლისურ ენაზე. მე ვგულისხმობ დოკუმენტაციის ძირითად პუნქტებს - როგორ დაკავშირება, რომელი ვარიანტები ხელმისაწვდომია და ა.შ. ყველაფერი არ იმოქმედებს, რადგან მე თვითონ მე არ გავიგებ მას გარკვეულ პუნქტებში. წარმოგიდგინოთ თქვენი საიტი, თქვენ უნდა გააკეთოთ მინიმუმ სამოქმედო. თქვენ ახლა მიჩვეული ხართ.
Download WebSite- ზე სკრიპტის ორი ვარიანტია - შეკუმშული (მინიმუმამდე) და არაკომპრესირებული. უმჯობესია გამოიყენოთ ზუსტად - masonry.pkgd.min.js. ასევე, ბიბლიოთეკა შეიძლება დატვირთული CDN- დან:
არაკროპრესი
შეკუმშული (მინიმუმამდე)
მე გირჩევთ, რომ CDN- ის ქვისა მინიმუმამდე შემცირდეს ვერსია. ამიტომ ჩვენ შევამცირებთ არასაჭირო HTTP მოთხოვნის რაოდენობას. ზოგადად, რასაც თქვენ აკავშირებთ სკრიპტს, თუ CDN- სთან ერთად, მასთან დაკავშირება შეგიძლიათ.
ქვისა, ჩვენ უნდა შევქმნათ მშობლის ბლოკი და მასში ელემენტები.
სიცხადე, მე შევქმენი დემო გვერდი სხვადასხვა ზომის სურათები. სურათს მივიღე, როგორც ელემენტების მაგალითი, რადგან მათ აქვთ განსხვავებული სიმაღლეები, მაგრამ სურათების ნაცვლად შეიძლება იყოს ბლოკი: ტექსტი, ვიდეო და ა.შ. სცადეთ ბრაუზერის ფანჯრის შემცირება და ნახავთ სურათებს შეუფერხებლად შეცვალონ თქვენი პოზიცია.
მოდი ვნახოთ, რა HTML კოდი გამოიყურება:
...
#Container (Border: 1px მყარი #CCC; ზღვარი: 0 Auto; Padding: 50px 0; მაქს-სიგანე: 1170px;) / * Mesh Element * / .element-item (Border: 2PX მყარი RGBA (0, 0, 0, 0, 0, 0, 0.35); ზღვარი-ქვედა: 15px; padding: 1px; სიგანე: 280px) / * / mesh element * / h1 (ტექსტის გასწორება: ცენტრი; ზღვარი: 0 50px)
როგორც ხედავთ, CSS გამოიყენება აქ მინიმუმამდე.
ინიციალიზაცია ქვისწყლის მოდული
ამის გაკეთება შეგიძლიათ რამდენიმე გზით.
ქვისაგან ინიციალიზაცია JavaScript- ის მეშვეობით
თქვენ შეგიძლიათ გამოიყენოთ ქვისა, როგორც jQuery-plugin:
$ ("სელექტორი"). ქვისა ();
მაგრამ გაითვალისწინეთ, რომ ამ მეთოდით უნდა იყოს დაკავშირებული jQuery ბიბლიოთეკაში:
დემო გვერდზე მე ინიცირებული ქვისა, როგორც jQuery-plugin, i.e. მე მაქვს შემდეგი ინიციალიზაციის კოდი:
JQuery (document) .მახალი ($) ($ ("ელემენტები-გიდები"). ქასონერი (/ /
თუ "ქვისა ()" მეთოდი გაატარეთ, ჩვენ ორი ვარიანტი გავიარეთ: Itemelector და ColumnWidth. ეს საჭიროა ორი ვარიანტი. დეველოპერის აზრით, ისინი აუცილებელია სკრიპტის ნორმალური ოპერაციისთვის. თუმცა, ჩვენ ვისაუბრებთ მხოლოდ ქვემოთ მხოლოდ ქვემოთ. ყველაფერი, ამ ქმედებების შემდეგ ყველაფერი უნდა იმუშაოს.
ინიციალიზაცია ვანილის JavaScript- თან
თქვენ შეგიძლიათ გამოიყენოთ ქვისა ასევე Vanilla JS:
ახალი ქვისა (elem, პარამეტრები)
ქვისა () კონსტრუქტორი ორ არგუმენტს იღებს: კონტეინერის ბავშვთა ელემენტი და ობიექტის ვარიანტი. ინიციალიზაციის კოდი იქნება შემდეგი.
Var elem \u003d document.queryselector ("ელემენტები-გიდები"); var msnry \u003d ახალი ქვისა (Elem (// პარამეტრები Itemselector: ".ელემენტირება", ColumnWidth: 200)); / E ელემენტის არგუმენტი შეიძლება იყოს სელექტორის სიმებიანი // ინდივიდუალური ელემენტისთვის VAR MSNRY \u003d ახალი ქვისა (". ელემენტები-გიდები", (/ / პარამეტრები));
პატიოსნად, ვანილის JS- სთან არ ვმუშაობდი, ამიტომ მე არ შემიძლია ვთქვა, რა არის კარგი, ვიდრე jQuery. უბრალოდ ვიცი, რომ ასეთი მეთოდი არსებობს.
ინიციალიზაცია HTML- ის მეშვეობით.
თქვენ შეგიძლიათ ინიცირება ქვისა HTML- ის მეშვეობით, ერთი ხაზის JavaScript Code- ის წერილობით. ამისათვის თქვენ უნდა დაამატოთ ატრიბუტი - "მონაცემების ქვისა" კონტეინერი ყველა ბავშვის ელემენტზე. პარამეტრები შეიძლება გადაეცეს ღირებულებას.
გადაცემული პარამეტრების უნდა შეესაბამებოდეს JSON ფორმატში. მე მინდა ყურადღება მიაქციოთ კოდექსში შეთავაზებების გამოყენებას. შეთავაზებები მონაცემების ქვისწყლის ატრიბუტი არის ერთი და გადამცემი პარამეტრები - ორმაგი. ისინი. ეს არის ის, თუ როგორ არის ნაჩვენები მაგალითზე.
ეს ვარიანტი შეიძლება გამოყენებულ იქნას, თუ არ გსურთ გამოიყენოთ ჭარბი JavaScript საიტზე. მაგალითად, მე არ დაუყოვნებლივ მოვახერხე jQuery თუ ის არ იყო გამოყენებული იქნას საიტზე.
აქ არის ისეთი ბიბლიოთეკა. არაფერია რთული. Რა არის შემდეგი?
ელემენტების ზომები
ქალიშვილის ელემენტების ზომები შეიძლება იყოს როგორც ფიქსირებული და რეზინის. ბლოკების სიგანეზე ფიქსირებული ზომა (სიგანე და სიმაღლე) და დიზაინი არის CSS სტილის ფაილში. სიმაღლე მინდა ვთქვა, თუ არ გამოიყენოთ ცარიელი ბლოკები, ბლოკის სიმაღლე მკურნალობს ბრაუზერით მისი შინაარსით. ჩემს შემთხვევაში, მე არ ვთხოვ სიმაღლეს, რადგან სურათები ასე რომ თქვენი საკუთარი სიმაღლე.
...
რეზინის ბადე
რეზინის ქსელის საშუალებით, ელემენტების სიგანე პროცენტული მაჩვენებელია. რეზინის ქსელი ძირითადად გამოიყენება ადაპტირებულ დიზაინში. ჩვენ უფრო მეტს ვსაუბრობთ ქვემოთ მოცემულ ვარიანტებზე.
...
დატვირთული.
ზოგჯერ, როდესაც გვერდი დატვირთულია, ეს შეიძლება მოხდეს, რომ ელემენტები ერთმანეთს გადაფარავს. ამავდროულად, ისინი ყველა ერთიანად აპირებენ და საშინელებაა. ასე რომ თქვენ შეგიძლიათ ამ პრობლემის გადაჭრა მცირე ბიბლიოთეკაში - დატვირთული.. საუკეთესო რამ იყო გამოვლინდა ჩემთან ერთად ადაპტური დიზაინი. ეს იყო მაშინ, როდესაც მე გახსნეს საიტი მობილური ტელეფონიდან სურათების ბადეები მე მივდიოდი ერთი pile.
CNACE CLOADED CDN:
ImageLaaded პუნქტის გამოყენება გვერდზე მხოლოდ მისი სრული დატვირთვის შემდეგ.
// init ქვისა var $ grid \u003d $ ("GRID"). ქვისა (/ / პარამეტრები ...)); // განლაგება ქვისა თითოეული სურათის შემდეგ $ grid.Imagoaded () პროგრესი (ფუნქცია () ($ grid.maasonry ("განლაგება"););
ან ქვისწყლის ინიციალიზება ხდება მხოლოდ ყველა სურათის სრული დატვირთვის შემდეგ.
Var $ grid \u003d $ ("GRID"). ჯოჯოხეთი (ფუნქცია () (/ / INT ქვისა მას შემდეგ, რაც ყველა სურათს დატვირთულია $ grid.masonry ((/ პარამეტრები ...)););
პარამეტრები (პარამეტრები)
ახლა მოდით გავიგოთ, რა შეგვიძლია გადავიდეთ პარამეტრების მეთოდით ქვისა ().
ყველა ვარიანტი დაჯგუფებულია. კარგად, ეს კეთდება ისე, რომ ეს იყო ადვილი ნავიგაცია მათ.
ახლა ვნახოთ, რა ვარიანტები შედის კონკრეტულ ჯგუფში.
განათლება
ეს ვარიანტი მიუთითებს იმაზე, თუ რა ელემენტებს იყენებენ ქვისა ეფექტი. სასარგებლოა ამ პარამეტრის მითითება, რადგან ჩვენ შეგვიძლია გაჭრა ნივთები, რომლებიც არ არის განლაგების ნაწილი. ეს პარამეტრი უკვე ცნობილია ჩვენთვის, როდესაც ჩვენ დაიშალა ქვისა ინიციალიზაცია.
ItemeElector: ".element-item"
columnwidth.
განსაზღვრავს განლაგების ელემენტების სიგანეს. თუ ეს პარამეტრი გამოტოვებთ ქვისას პირველ ელემენტს გარე სიგანეს მიიღებს. დეველოპერი ყოველთვის ურჩევს განსაზღვროს დინამიკების სიგანეზე, არის თუ არა ფიქსირებული ან რეზინის ელემენტები.
COLUMNWIDTH: 80.
ელემენტის ზომები (ელემენტის Sizing)
თუ ჩვენ გვინდა, რომ ჩვენი განლაგება რეზინის ელემენტებით, მაგალითად, ადაპტური დიზაინით, მაშინ ამ მიზნებისათვის არის პარამეტრი, რომელიც ჩვენს რეზინის ქსელს ქმნის.
პროცენტული
ჩვენ დაიშალა რეზინის ქსელის კოდი ზემოთ, მაგრამ ვარიანტები არ შევიდა დეტალები.
...
როგორც ვხედავთ, რეზინის ქსელის გასააქტიურებლად, ჩვენ დავამატეთ პროცენტული პარამეტრი საწყობის კოდექსს ლოგიკური ღირებულებით " მართალია.". და როგორც სიგანე მითითებულია ელემენტის კლასს, რომლის სიგანე პროცენტში ენიჭება CSS- ში.
ჭუჭყის.
ელემენტებს შორის, შეგიძლიათ დააყენოთ indent ჰორიზონტალური გამოყენებით ვარიანტი. ჭუჭყის., რიცხვის გავლა. რიცხვი შეესაბამება პიქსელებში დაბრუნებას.
ჭუჭყიანი: 15.
ელემენტებს შორის ვერტიკალური ინდექსები მითითებულია CSS- ში.
ელემენტის საქონელი (ზღვარი-ქვედა: 15px;)
Indents შეიძლება მითითებული როგორც პროცენტული, I.E. ისინი განსხვავდებიან ბრაუზერის ფანჯრის ზომაზე.
...
ჩვენ შევქმენით ცარიელი div ბლოკი თქვენს სიაში.
ამ ბლოკის CSS- ის სიგანე პროცენტებში სიგანე მიუთითებდა. და ინიციალიზაციის კოდექსის ვარიანტში ჭუჭყის. ჩვენ მიუთითეთ ამ ცარიელი ელემენტის კლასი. სკრიპტი თავად შეიქმნება indentation პროცენტული, ეფუძნება სიგანე ამ ბლოკი.
შტამპი.
ეს ვარიანტი შეიძლება დაინიშნოს იმ საქონელზე, რომელიც იქნება ქვისა გიდში. დარჩენილი ელემენტები იქნება ქვემოთ და დაამტკიცებს ფიქსირებას. ზოგჯერ ეს შეიძლება იყოს სასარგებლო. Პარამეტრები შტამპი. ჩვენ გადავდივართ კლასს stamped ელემენტს.
შტამპი: ".Stamp"
თქვენ შეგიძლიათ უფრო დეტალურად გამოიყურებოდეს Codepen, ასევე რედაქტირება საჭიროების შემთხვევაში.
fitwidth.
ამ ვარიანტის არსი ის არის, რომ როდესაც ჩვენ გაააქტიურებთ მშობლის ელემენტის ბლოკს, პიქსელზე ფიქსირებული სიგანე ემატება. უფრო მეტიც, მშობლის ბლოკის სიგანე ტოლია ყველა ბავშვის ელემენტის სიგანეზე. ამდენად, CSS- ის მშობლის ბლოკირების მითითებით " მარგინი: 0 ავტო»ცენტრში ქვის ელემენტების ბლოკირება შეგვიძლია.
ელემენტები-გიდები (ზღვარი: 0 ავტო;) Isfitwidth: TRUE
ყურადღება! ეს ვარიანტი არ მუშაობს იმ ელემენტებთან, რომელთა სიგანე აღინიშნება პროცენტში. "ColumnWidth" ვარიანტის ღირებულება უნდა იყოს მითითებული პიქსელებში, მაგალითად, "ColumnWidth: 120". წინააღმდეგ შემთხვევაში, ელემენტები შეიძლება ერთმანეთს მიიღონ.
წარმოშობის.
ჩვეულებრივ, ყველა mesh ელემენტები შეესაბამება მარცხნივ. ვარიანტი წარმოშობის. თქვენ შეგიძლიათ შეცვალოთ ობიექტების ჰორიზონტალური ნაკადი და მარცხნივ მარჯვნივ. საკმარისია ლოგიკური ღირებულების გასავლელად " ცრუ. "
Originleft: ცრუ
წარმოშობის.
ასევე, ისევე როგორც ჰორიზონტალურად, ნაგულისხმევი ქსელის ელემენტები შეესაბამება ზედა ზღვარზე. ვარიანტი წარმოშობის. თქვენ შეგიძლიათ შეცვალოთ ელემენტების ნაკადი ვერტიკალურად და დაამატეთ ქვედა ნაწილში, დაახლოებით Tetris 🙂.
Origintop: FALSE.
Setup (Setup)
გადადით პარამეტრების პარამეტრები.
კონტეინერები
ეს პარამეტრი არღვევს მშობლის კონტეინერის ელემენტების სტილს. ჩვეულებრივ, მშობელი არის "პოზიცია: ნათესავი" წესი. ეს წესი შეიძლება გაუქმდეს.
კონტეინერები: null
რა თქმა უნდა, შესაძლებელი იყო CSS ფაილის მეშვეობით გადალახოს "! მნიშვნელოვანია", მაგრამ მე არ მომწონს ამის გაკეთება. ზოგადად, მე ვფიქრობ, ეს არის ცუდი ტონი წესი განლაგებაში. სტილის გაწმენდა უკეთესია, უფრო მეტიც, დეველოპერი გვაძლევს ამ შესაძლებლობას.
გარდამავალი.
გარდამავალი ხანგრძლივობა, როდესაც ელემენტი შეცვლის მათ ადგილს. ნაგულისხმევი დრო არის - 0.4 წამი. დროის ფორმატი არის CSS დრო ფორმატში.
გარდამავალი: "0.4s"
აქ არის გარკვეული მაგალითები დროის გარემოში.
// სწრაფი ანიმაციის გარდამავალი განახლება: "0.2s" // Slow ანიმაციური ტრანსფორმაცია: "0.8s" // არ არის ანიმაციური ტრანსფორმაცია: 0
პასუხის სია
ამ ვარიანტით, შეგიძლიათ შეცვალოთ ცვლილება მშობლის ბლოკის ზომაში. ისინი. ჩვეულებრივ, თუ არ დააკონკრეტებთ ფიქსირებულ ზომას ბრაუზერის ეკრანზე, ჩვენი ბავშვის ქსელის ელემენტები შეიცვლება მათი ადგილმდებარეობის შეცვლას, გადაადგილდება, თავისუფალ სივრცეში. ასე რომ "ზომის" ვარიანტი, შეგიძლიათ გააუქმოთ გადასვლები.
ზომის შეცვლა: ცრუ
პატიოსნად, იგივე ეფექტი შეიძლება მიღწეული, თუ თქვენ სთხოვეთ მშობელს მხოლოდ ფიქსირებული ზომა. აქ არ მესმის დეველოპერი - არც მე არასწორად რაღაც, ან ეს ვარიანტი გარკვეულ შემთხვევებში ხდება. თქვენ შეგიძლიათ იხილოთ უფრო მეტი ინფორმაცია კოდეპენის მაგალითზე. სცადეთ შეცვალოთ ეკრანის ზომა ბრაუზერის ზომა. შემდეგ შეიცვლება "ზომის შეცვლა: ცრუ" ზე "ზომის შეცვლა: ჭეშმარიტი" და თქვენ გესმით, რას ვსაუბრობთ.
initlayout
ეს პარამეტრი აქტიურობს ჩვენს აგურის ქსელს სკრიპტის დაწყებისას. ჩვეულებრივ, ეს არის ჩართული - "Initlayout: TRUE". მაგრამ თქვენ შეგიძლიათ გააუქმოთ.
Initlayout: ყალბი
თქვენ შეგიძლიათ გამოიყენოთ მეთოდები და მოვლენები ქსელის გააქტიურებამდე. მაგალითად, შეგიძლიათ გააკეთოთ ისე, რომ თქვენი ქსელი გააქტიურდება კონკრეტული ღილაკის დაჭერით. კარგად, მაშინ რაღაც მსგავსი.
ამ სტატიაში, მე არ დაიშლება მოვლენები და მეთოდები, რადგან სტატია, ასე რომ აღმოჩნდა მოცულობითი. თქვენ შეგიძლიათ დამოუკიდებლად შეისწავლოთ ისინი დეველოპერის ვებ-გვერდზე. ასევე მოიძიებს განხორციელების მაგალითებს. ყველაფერი საკმაოდ გასაგებია. ყოველთვის არ არის სკრიპტების ავტორები ასეთ ინსტრუქციებში. ქვისა დამუშავების ინსტრუქციისთვის, მე დავამატებდი - 5 . 🙂
ქვისაგან სუფთა CSS- ზე
არსებობს ასევე ვარიანტი, რათა განახორციელოს brickwork on სუფთა CSS. მე არ მივცემ ყველა კოდს. თქვენ შეგიძლიათ ნახოთ კოდეპენი, არაფერია რთული. ამ შემთხვევაში, მოსახერხებელია ის ფაქტი, რომ თქვენ არ გჭირდებათ დამატებითი JS ბიბლიოთეკების დაკავშირება და დანამატი პარამეტრები.
პრინციპში, ყველა, რაც მე აღვნიშნე ზემოთ არის საკმარისი იმისათვის, რომ გამოიყენოთ აგურის ეფექტი თქვენს საიტზე.
და ამ ყველაფერს. გმადლობთ ყველა თქვენი ყურადღებისთვის. მიუთითეთ კითხვები კომენტარებში, მე ყოველთვის ბედნიერი ვიქნები. იხილეთ შემდეგ სტატიებში. Მანამდე!
მე ვუთხარი, როგორ შეცვალოთ ახალი დღიური დიზაინი, გულუბრყვილო რწმენა, რომ ყველა მნიშვნელოვანი სამუშაო უკვე გაკეთდა. მაგრამ, როგორც აღმოჩნდა, ჯერ კიდევ ბევრი სამუშაო იყო. უფრო მეტიც, მე შევქმენი ჩემი საკუთარი ნაწილი. მაგრამ პირველი რამ პირველი. ამ პოსტზე, მე შევეხდები შემდეგ კითხვებს:
- როგორ წარმოგიდგინოთ ახალი WordPress ჩიპი რეგისტრაციის საგანი - ჩანაწერის ფორმატები;
- როგორ შეასწოროთ ბლოკის პოზიციონირების პრობლემები ქვისა სკრიპტში;
- როგორ უნდა განახორციელოს ქვისა ნებისმიერ საიტზე.
ასე რომ, რა არის Masons და JavaScript? აღმოჩნდება, რომ არსებობს კონტაქტის საერთო წერტილი! ვიმედოვნებ, ყველამ იცის, ვინ არიან ასეთი მეზონები. თუ არა, აქ არის მოკლე განმარტება:
მეზონებიან ფრანკ-მეზონსი - "უფასო Bricklayers" - ის ლიტერატურულ თარგმანში, მოძრაობა, რომელიც XVIII საუკუნეში დახურულ ორგანიზაციაში ჩამოყალიბდა. Freemasonry- მა XVI- ის დასასრულს XVII საუკუნის დასაწყისში მცირე წყაროების წარმოშობა იღებს, სავარაუდოდ, მეისონის საოპერაციო სემინარებს. მეზონების ყველა საქმიანობა ძალიან სიმბოლურია, ბევრი უკავშირდება არქიტექტურულ სიმბოლიტიკას და ერთ-ერთ ძირითად სიმბოლოს არის დამონტაჟებული პირამიდა.
მე ძალიან დაინტერესებული ვარ masons და ყველაფერი, რაც მათთან არის დაკავშირებული. Ძალიან საინტერესოა. მინდა ვისაუბრო ნამდვილი მეისით (მაგრამ არა ასეთი, ვინ არის მხოლოდ პონტის გულისთვის, მოვუწოდებ საკუთარ თავს, კერძოდ, ნამდვილი სამაგისტრო). მაგრამ ეს ასე არ არის. და იმაში, რომ Pinbin- ის დიზაინის თემას იყენებს სკრიპტი, რომელიც იწვევს ბლოკებს ჩანაწერების გამოქვეყნებისას, როგორც აგური. ეს არის ძალიან პოპულარული სტილი, სხვადასხვა გზები გამოიყენება ასეთ ეფექტზე, მაგრამ ერთ-ერთი საუკეთესოა უდავოდ JavaScript ქვისა..
ამ JavaScript- ის ოფიციალური ვებ-გვერდი არის Masonry.desandro.com, ცხადყოფს, თუ როგორ მუშაობს და აჩვენებს, თუ როგორ უნდა დააკავშიროთ საიტზე. უფრო მეტიც, ეს შეიძლება იყოს ნებისმიერი საიტი, არ არის აუცილებელი WordPress, A და Dle ან ზოგადად სტატიკური HTML. მაგრამ ღირს, რომ WordPress საწყისი ბოლო ვერსიები (საწყისი 3.8, თუ მე არ ცდება) ქვისა სკრიპტი უკვე შედის ძირითად პაკეტში. მაგრამ როგორც უკვე აღინიშნა - ყველაფერი წესრიგში.
როგორ განვახორციელოთ თემის WordPress მხარდაჭერა მხარდაჭერის ფორმატები ჩანაწერები?
ასე რომ, დახვეწილობის პროცესში გადავწყვიტე, რომ ჩემი თემა იყო რეგისტრაციის ფუნქციები იმ ფუნქციებში, ისე, რომ ძირითადს შეეძლო გამოაქვეყნოს სტატუსი, გალერეა, სურათი ან ვიდეო, ამ ბლოკების სხვადასხვა დიზაინით. მე გადავწყვიტე დიზაინის არქივში და ამ თემების ძალიან მცირე რაოდენობა აღმოვაჩინე ამ ფუნქციის მხარდასაჭერად.
მაგრამ თუ თქვენ განაახლეთ თქვენი WordPress, ჩანაწერების ფორმატები შეიძლება განხორციელდეს საგანი, და ეს ადვილია. ასე რომ, პირველ რიგში გახსენით ფაილი ფუნქციები.თქვენი თემა რეგისტრაციის და დაამატეთ შემდეგი კოდი:
Add_Action ("After_setup_theme", "slug_post_formats"); ფუნქცია slug_post_formats () (პოსტი ფორმატები, მასივი ("განზე", "image", "ვიდეო", "quote", "ლინკი", "გალერეა", "ჩეთი", "სტატუსი",)); )
ეს კოდი შეიძლება ჩაიწეროს ფაილის ნებისმიერ ადგილას. ფუნქციები., მთავარი ის არის, რომ არ დაარღვიოს ნებისმიერი ფუნქცია. თუ ყველაფერი სწორად გაკეთდა, მაშინ ახალი ჩანაწერის შექმნისას, თქვენ უნდა ჰქონდეთ ახალი ფორმატის ბლოკი, თუ არა, მაშინ გახსენით "ეკრანის პარამეტრები" მენიუ ზედა და აღსანიშნავად გამოხატული ბლოკი.
მაგრამ ეს ფუნქცია არ იმუშავებს, სანამ სპეციალურ ფაილებს გამოჩნდება ფოლდერში, ტიპის სახელებით content-skill.php. - სახელი "რაღაც" ფაილი, ეს არის მითითება თარგი, რომლის ფორმატი ეს ფაილი იქნება.
Ისინი შეიძლება იყვნენ:
ფორმატები არ არის აუცილებელი, გამოიყენოთ ყველაფერი, მაგრამ თქვენ შეგიძლიათ მიუთითოთ კოდექსის ზემოთ მხოლოდ ის, რაც თქვენ გჭირდებათ მაგალითად, თუ საჭიროა მხოლოდ ვიდეო, ერთი სურათი და გალერეა, შემდეგ კი ჩასმა ფუნქციები.ასეთი კოდი:
Add_Action ("After_setup_theme", "slug_post_formats"); ფუნქცია Slug_Post_Formats () (პოსტი ფორმატები, მასივი ("სურათი", "ვიდეო", "გალერეა",));
კარგად, საჭიროა მხოლოდ ფაილები, რომლებიც ჩამოთვლილია ხაზში: content-image.php, content-video.phpდა content-Gallery.php. პლუსი content.php. ჩვეულებრივი ჩანაწერებისთვის. სად არის ეს ფაილი? თქვენ შეგიძლიათ გამოაგზავნოთ ისინი Twentyfurteen- ის თემისგან (ან სხვა დამხმარე ფორმატებში, მაგალითად, crates) და შემდეგ დახვეწა. უბრალოდ ჩამოტვირთოთ ეს თემა თქვენს კომპიუტერში, მიიღოს ფაილი, რომელიც გჭირდებათ და შეავსეთ სერვერზე საქაღალდეში თქვენი დიზაინი. ამის შემდეგ, ისინი გამოჩნდებიან კონსოლში განყოფილებაში გამოჩენა -\u003e რედაქტორი. გარდა ამისა, ეს ფაილი უნდა მოიტანოს საჭირო ფორმატში, თქვენ ასევე უნდა შეიქმნას სტილის ფაილი style.css..
ეს არის painstaking სამუშაო, მაგრამ ის გადაიხდის ასობითჯერ. მე გამოვხატავ ამ ფაილების მაგალითებს (დაახლოებით ამ დღიურში გამოვიყენებ):
კონტენტი- status.php ფაილი:
Content-video.php ფაილი და content-Gallery.php სრულიად იგივეა:
Content.php ფაილი:
">
პატარა თხრა, თქვენ შეგიძლიათ გაერკვნენ, თუ რა უნდა გააკეთოთ საკუთარი შაბლონები ჩანაწერების ფორმატებისთვის. ამავე დროს, თქვენ არ უნდა დაივიწყოს CSS სტილის შესახებ. მაგრამ აქ არ შემიძლია რაიმე რეკომენდაციები, რადგან ეს არის ძალიან კონკრეტული კითხვა და დამოკიდებულია რეგისტრაციის კონკრეტულ თემაზე.
თუ სირთულეები წარმოიქმნება, ან რაღაც გაუგებარია - თქვენ შეგიძლიათ დავეხმაროთ კომენტარებში, ვიდრე მე შემიძლია.
კარგად, ჩანაწერების ფორმატები ჩანერგილია და კარგად მუშაობს. მაგრამ არ იყო რაღაც ... კარგად მუშაობს, მაგრამ ქვისა სკრიპტთან ერთად, მათ არ სურთ მეგობრები იყვნენ. მაგალითად, გალერეის ჩასმა შესაბამისი ჩაწერის ფორმატის ჩასმა, გალერეის ქვეშ იყო უზარმაზარი სივრცე, იგივე ბუნება, რომელიც წინა პოსტიდან არის, სადაც მელაპარაკებოდი უცნაური ხარვეზების შესახებ Google- ის შრიფტის გამოყენებისას შრიფტები. აქ არის ეს პრობლემები, რომლებიც ჩვენ შეისწავლიან ქვემოთ.
როგორ დაფიქსირება ბლოკი პოზიციონირების პრობლემები ქვისა სკრიპტი
ნება მომეცით შევახსენო პრობლემის არსის შესახებ: Google შრიფტის გამოყენებისას შსს-ს სკრიპტის მუშაობაში, პრობლემები გამოჩნდა სტატიების განცხადებებში სხვადასხვა სიმაღლის სახით. იგივე ეფექტი, მხოლოდ უფრო მეტად შესამჩნევი და რეკორდული ფორმატების გამოყენება, კერძოდ, როდესაც ჩამოთვლილი გალერეა გალერეის ჩასმა Jetpack Pagin- ის ჩასმა.
როგორც მე ვთქვი, მე ვიყენებ jetpack პაკეტი ჩემს ბლოგზე, რომელშიც არის მშვენიერი მოდული მოდური ფილა გალერეები, მაგრამ როდესაც ამგვარი გალერეის ჩასმა დიდი პერიოდის განმავლობაში გამოჩნდა:
ქვისა სკრიპტი არის დამნაშავე, ეს არის ქვისა სკრიპტი: ვებ-შრიფტების გამოყენებისას, ის ადრე მუშაობს, ვიდრე შრიფტები დატვირთული და, შესაბამისად, სრული გვერდის დატვირთვის დასასრულს, ბლოკები ოდნავ გაბრწყინდება. შეიძლება კიდევ ერთი ვარიანტი იყოს - როდესაც ბლოკები თავდაპირველად გლუვი, და შემდეგ jerk ერთმანეთს.
გალერეა დაახლოებით იგივეა: მშვენიერი დახრილი გალერეის მშენებლობისას ჯოჯოხეთიდან, სკრიპტი, რომელიც ითვლის სურათების ზომას ამ დროისთვის (რამდენიმე ეტაპად) და ქვისა ბლოკების პოზიციონირება იყენებს პირველ შემომავალ (შუალედურ) მონაცემებს, რომლებიც ბრუნდებიან დახრილი გალერეა სკრიპტით. აქედან გამომდინარე, ეს ხარვეზი გამოჩნდება.
ამის შესახებ ოფიციალურ ქვის ვებსაიტზე (იხ. ზემოთ) არსებობს განმარტებები: სექციები ჯოჯოხეთით და ვებ-შრიფტები. თქვენ შეგიძლიათ გაეცნოთ ოფიციალურ მეთოდებს მითითებულ ბმულებზე. მაგრამ ამ შეცდომების გამოსწორების მიზნით მუშაობის გამარტივება, მე მოგცემ ჩემს რეკომენდაციებს.
ქვისა სკრიპტის პარამეტრების მართვა, მე ვიყენებ ფაილს ფუნქციები. რომელშიც მე განსაზღვრავს საჭირო ინსტრუქციებს და დააკავშირებს მას თარგი. პირველ რიგში, მიუთითეთ ანიმაციური პარამეტრების და შემდეგ ჩაწერეთ კოდი შეცდომის კორექტირებაზე. ამ ფაილის შინაარსი მთლიანად კომენტარებით მივცემ, შეგიძლიათ გამოიყენოთ ეს პრაქტიკულად არ შეცვლილა:
/ * ქვისაგან * / jQuery (დოკუმენტი) ძირითადი პარამეტრების განსაზღვრა ($ ("# პოსტ-ფართობი"). ქვისა (/ * მიუთითეთ ბლოკის ID, რომელსაც ჩვენ ვიყენებთ ქვისა * / isanimated: True, / * ბლოკის ანიმაციის გამორთვა, მოათავსეთ ყალბი * / ანიმაციაპრესები: (ხანგრძლივობა: 500, / * ანიმაციური სიჩქარე მილიწამებში * / გამარტივება: "ხაზოვანი", რიგი: ცრუ));)); / * გალერეა * / / * ჩართვა ქვისა * / / * აღსრულების დაგვიანებით, სანამ ყველა სურათი დატვირთულია * / / * დაწყება * / (ფუნქცია (# პოსტ-ფართობი ") / * შენიშვნა: აქ ასევე გჭირდებათ ბლოკის ID * / $ კონტეინერის მითითების მიზნით. გადმოტვირთული (ფუნქციონერი ($) ($ კონტეინერი.));)) (jQuery); / * ბოლოს * / / * ვებ-შრიფტის პრობლემების მოგვარება * / / * დაწყება * / ფუნქცია Triggermaasonry (თუ (! $ კონტეინერი) (დაბრუნება;) $ container.masonry ());) $ (ფუნქცია () $ container \u003d $ ("# პოსტ-ფართობი"); triggermaasonry ();); TypeKit.Load ((აქტიური: Triggermasonry, უმოქმედო: Triggermasonry)); /* დასასრული */
შეარჩიეთ ის, რაც გჭირდებათ, და სკრიპტის კომენტარები და არასასურველი ნაწილი შეიძლება წაიშალოს, მაგალითად, თუ თქვენ გაქვთ მხოლოდ ვებ-შრიფტის პრობლემა, დაგვიანებით, როდესაც სურათების ჩატვირთვა შეიძლება წაიშალოს.
დააკავშირეთ ეს ფაილი თარგი. სათაურით header.php.დახურვის ტეგიამდე ჩასმა:
სხვათა შორის, ეს კოდი შეიძლება პირდაპირ გვერდებზე იყოს დაკავშირებული, ასევე დახურვის ტეგიამდე ჩასმა:
ეფექტი დაახლოებით იგივე იქნება, თუმცა JavaScript უფრო სწორად არის დაკავშირებული ფაილთან.
სხვათა შორის, თუ თქვენ გაქვთ WordPress, მაშინ დაკავშირება ქვისა სკრიპტი თავად და პარამეტრების ფაილი შესაძლებელია მეშვეობით ფაილი. ფუნქციები.თქვენს თემში, მხოლოდ დასძინა კოდი:
ფუნქცია Mason_Script () (WP_Register_Script ("ქვისა", "/ შეყვანის J. / ფაილი / maasonry.pkgd.min.js"); wp_enqueue_script ("ქვისა.ფუნქციები", "გზა / / ფაილი / ფუნქციები"); Wp_enceue_script ("ქვისა");) Add_Action ("wp_enqueue_scripts", "Mason_Script");
რა თქმა უნდა, ეს არ არის ზუსტი ინსტრუქციები და ქმედება, მაგრამ მხოლოდ ზოგადი რეკომენდაციები, რადგან თითოეული შემთხვევა უნიკალურია და უნივერსალური სახელმძღვანელოს შექმნა თითქმის შეუძლებელია. თუ თქვენ გაქვთ შეკითხვები - სთხოვეთ კომენტარებს.
როგორ უნდა განახორციელოს ქვისა ნებისმიერ საიტზე
ახლა წარმოიდგინეთ სიტუაცია, რომ ჩვენი საიტი არ არის CMS WordPress ბოლო ვერსია, მაგრამ მოდით ვთქვათ DLE (Datalife Engine) და ჩვენ ასევე გვინდა ასეთი ლამაზი ადგილმდებარეობა ბლოკები გამოყენებით ქვისა.
ყველა საკმაოდ მარტივია. პირველი, თქვენ ჩამოტვირთოთ ოფიციალური ვებ-გვერდის ქვისა masonry.pkgd.min.js. . დაასხით ეს თქვენს სერვერზე და დააკავშირეთ თარგში. DLE- სთვის main.tpl დახურვის tag ჩასმა:
ახლა ჩვენ განვსაზღვრავთ ბლოკის სტრუქტურას, რომლის ფარგლებშიც ქვისა იმუშავებს. მაგალითად, ასე რომ:
CSS- ში თქვენ უნდა მიუთითოთ მსგავსი რამ:
Mason-Box (სიგანე: 25%;) .მასონის ყუთი ფართო (სიგანე: 50%;)
ახლა გვერდი სჭირდება სკრიპტის ოპერაციის დაწყებას:
ახლა მე გაჩვენე მართლაც გაშვებული მაგალითი:
1. დაკავშირება ფაილი masonry.pkgd.min.js. როგორც ზემოთ ნაჩვენებია.
2. გვერდზე HTML- ზე, სკრიპტის ინიციალიზაცია:
3. CSS- ში ჩაწერილია შემდეგი:
HalfNews- შინაარსი (Padding: 0 5px 5px 10px; ზღვარი ქვედა: 15px; სასაზღვრო: 1px მყარი # E9E9E9; -Webkit-box-shadow: 0 0 1px #bbb; -MOZ-Box-shadow: 0 0 1 1px #bbb; Box-shadow: 0 0 1 1px #bbb; სიგანე: 345px; / * ძალიან მნიშვნელოვანი ნივთი - არსებობს ბლოკის სიგანე * / / * თუ ეს უფრო მეტია, ვიდრე თქვენ გჭირდებათ, მაშინ ბლოკები ან არ შეიძლება * / / * გასწორება ჰორიზონტალურად ან თანდართული მეგობარს * / ზღვარი-მარცხნივ: 10px; / * ის არის დაშვებული მანძილი ჰორიზონტალურად შორის ბლოკებს * /)
აქ არის ისეთი მარტივი დიზაინი Technotron ვებსაიტის მთავარ გვერდზე (სადაც შინაარსი მდებარეობს ორ სვეტში).
Ის არის. თუ მე ვიყავი არასწორი სადღაც, ეს არ იყო მიზანშეწონილი, უბრალოდ სწრაფი პოსტი და მინდოდა ბევრი, ასე რომ შეცდომები არ არის გამორიცხული - თუ რამე არ გამოდის ან სადღაც ნათელი შეცდომა: გთხოვთ გესმით, ჩვენ ვნახავთ ხარვეზს სწორი. უკაცრავად აღწერილი მეთოდების მუნიციპალიტეტში.
Ჯერჯერობით. ვიმედოვნებ, რომ ეს იყო სასარგებლო.
ნაცვლად epiloga:
წარმატებული ბიზნესის საიდუმლოებები:
1. Heher იცის მას.
2. სემ რატომღაც გამოვიდა
Tags:
Pisano 08/01/2014 
