Blocks ეს არის დინამიური ბადე. ადაპტური განლაგება, გაკვეთილი მესამე. ბადე ბლოკებით შეცვლილი ფოტოები jquery ბადეში

ამ გაკვეთილზე ჩვენ შევხედავთ ქსელზე დაფუძნებული პორტფოლიოს გვერდის განლაგების შექმნას. ქსელის შესაქმნელად გამოიყენეთ ბიბლიოთეკები და Dave DeSandro. სურათები ნაჩვენებია დემო ვერსიაში, აღებულია Unsplash.com-დან.

ქვისა არის ბადე, რომელიც დაფუძნებულია სვეტებზე. მცურავი შეფუთვის გამოყენებით შექმნილი ბადის ნაცვლად, ქვისა ბადეს არ აქვს მწკრივის ფიქსირებული სიმაღლე, რაც უზრუნველყოფს ოპტიმალურ სივრცეს ვებ გვერდის შუაში, რაც გამორიცხავს ყოველგვარ არასაჭირო ხარვეზს. ეს ბადე გამოყენებული იქნება პორტფოლიოს გვერდებზე, სურათების გალერეების გვერდებზე და ბლოგ პოსტებით გვერდებზე.

1. მეტატეგები და სექციები

ქვისა გალერეა

2. გვერდითი სათაური

გვერდის სათაური არის განყოფილება, რომელიც შეიცავს კონტეინერის შემდეგ ელემენტებს:
- ლოგო;
- გოლოვნის მენიუ

ჰელენ პარკერის პირადი ფოტოგრაფი

გვერდის ძირითადი ნაწილი შედგება ფოტოების ბლოკებისგან, ზოგიერთი ამოცანისთვის გამოიყენება ნაცრისფერი ფილტრი, რაც მათ აძლევს შავ-თეთრი ფოტოების ეფექტს. ეს ეფექტი ხდება ინდუცირებისას.

ქვედაბოლო შეიცავს ინფორმაციას საავტორო უფლებებისა და სოციალური მედიის პოსტების შესახებ.

სრულფასოვანი მუშაობისთვის, თქვენ უნდა ჩართოთ შემდეგი სკრიპტები:

ქსელის სურათის გადაფარვის პრობლემა წარმოიქმნება imagesloaded მოდულის დახმარებით. ეს ნიშნავს, რომ თუ გამოსახულება შეირჩევა, ეს იქნება მასონური ბადე.

ამ გალერეის მაგალითი, მაგრამ აგებულია Bootstrap 3 ჩარჩოზე:

სურათების გალერეის კიდევ ერთი ვერსია შეიძლება შეიქმნას Gridify მოდულის გამოყენებით. ეს მოდული გამოიყენება ქსელის გამოსახულების შესაქმნელად, როგორიცაა Pinterest.

ამ გალერეის შექმნის პროცესი შეიძლება წარმოდგენილი იყოს შემდეგი ნაბიჯებით:

გთხოვთ გაითვალისწინოთ: ეს არის gridify.js მოდულის იმპლემენტაცია. თქვენი პროექტისთვის აირჩიეთ ის, რომელიც დაფუძნებულია jQuery ბიბლიოთეკაზე.

$(function () ( var options = ( srcNode: "img", // ბადის ერთეულები (კლასი, კვანძი) ზღვარი: "15px", // ზღვარი პიქსელის სიგანეში: "240px", // ბადის ელემენტის სიგანე პიქსელის მაქსიმალური_სიგანით : "", // დინამიური სარტყელი ელემენტის სიგანე ზომის შეცვლადია: true, // ხელახლა განლაგება, თუ ფანჯრის ზომის შეცვლა: "ყველა 0.5s ease" // მხარდაჭერა გადასვლისთვის CSS3 ;));

2. შექმენით HTML კოდი გალერეისთვის:

...

თქვენ შეგიძლიათ ნახოთ გალერეის სურათები, როგორც ადრე, fancyBox-ის გამოყენებით.

კოდი გალერეისთვის, რომელიც მსგავსია Pinterest-ისთვის Bootstrap 4-ისთვის:

Bootstrap 4 - შექმენით საპასუხო სურათების გალერეა gridify.js img-ის გამოყენებით ( padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; (opacity = 60); ... $(function() ( var options = ( srcNode: "img", // ბადის ერთეულების ზღვარი: "15px", // ზღვარი პიქსელის სიგანეში: "240px", // ბადის ელემენტის სიგანე პიქსელში max_width: " ", // დინამიური სარტყლის ერთეულის სიგანის ზომის შეცვლა: true, // ხელახლა განლაგება, თუ ფანჯრის ზომის შეცვლა ხდება: "ყველა 0.5 წამი მარტივია" // მხარდაჭერა CSS3-ისთვის); $(".grid").gridify(options); ) ;

ამ გალერეის მაგალითი Bootstrap 3-ზე.

BlocksIt მოდული საშუალებას გაძლევთ შექმნათ დინამიური განლაგების ბადე. ის ახდენს HTML ელემენტების რეორგანიზაციას „ბლოკებში“ და აფართოებს მათ ვებ გვერდებზე. ამისათვის საკმარისია მიუთითოთ აბონენტების რაოდენობა და შემდეგ შექმენით მოდული. გარდა ამისა, შეგიძლიათ შეაგროვოთ "ბლოკები" და შექმნათ ერთი დიდი.

BlocksIt.js აბრუნებს შერჩეულ ელემენტებს, ვიკორისტს და აბსოლუტურ პოზიციონირებას. ის ითვლის ელემენტის ზედა და მარცხენა პოზიციებს სიმღერის გონების მიხედვით:

გაუშვით ბოროტების ახალი ბლოკი მარჯვნივ, ეს
მოათავსეთ ახალი ბლოკი მოკლე ბლოკის ქვეშ.

ამ ვებსაიტის გამოსაყენებლად, თქვენ უნდა დააკავშიროთ jQuery ბიბლიოთეკა და დანამატის სკრიპტი:

შემდეგ ჩვენ მოვუწოდებთ .BlocksIt() ფუნქციას jQuery ობიექტზე. ალბათ ჩვენ შეგვიძლია გარკვეული კორექტირება. $(დოკუმენტი).ready(function() ($("#objectID").BlocksIt(); )); Და სულ ეს არის.
როგორ ვიძიოთ შურისძიება ბლოკებზე ელემენტები, დარწმუნდით, რომ ზომები მათთვის არის მითითებული .BlocksIt() ფუნქციის დაძახებამდე და ასევე უნდა გახსოვდეთ, რომ სურათები უკვე ნაჩვენებია. ამ მიზნით, შეგიძლიათ გამოიყენოთ $(window).load() რათა შეამოწმოთ ყველაფერი DOM-შია, ან გამოიყენოთ waitForImages-ის მსგავსი დანამატი სურათის სტატუსის შესამოწმებლად.

როდესაც დააწკაპუნებთ დანამატზე, შეგიძლიათ მიუთითოთ რამდენიმე დამატებითი პარამეტრი:

numOfCol:
ტიპი: Int ტიპიური: 5
ძეგლების რაოდენობა, რომელიც შეიქმნება.

offsetY:
ტიპი: Int ტიპიური: 5
ცხოველთან წვდომა ხდება ქვემოდან კანის ბლოკისთვის.

blockElement:
ტიპი: სიმებიანი ტიპი: 'div'
ბავშვის ელემენტი, რომელიც გარდაიქმნება ბლოკებად.

მარკირების მარაგი:

…………… მონაცემთა ზომის ატრიბუტი მიუთითებს ბლოკის ზომაზე (ბლოკების კომბინაციისთვის).
Wikliku სკრიპტი შეიძლება იყოს მსგავსი: $(დოკუმენტი).ready(function() ($("#container").BlocksIt(( numOfCol: 5, offsetX: 8, offsetY: 8, blockElement: ".grid") ));

კატეგორიები

პოპულარული