چیدمان آجری عنصرها (Masonry)

8 امتیاز

Loading…

Masonry چیست؟

یک کتابخانه جاوا اسکریپت به‌صورت شبکه‌ای می‌باشد. به این صورت کار می‌کند که عناصر را بر اساس فضای عمودی که دارند در موقعیت مناسب می‌چیند و تمام فضای خالی را پر می‌کند؛ که احتمالاً این حالت را در سراسر اینترنت مشاهده کردید.

اگر از این کتابخانه آجرهای ساختمانی را در نظر دارید باید گفت دیدتان نسبت به این کتابخانه درست می‌باشد، عناصر را جوری در کنار هم می‌چینیم تا فضای خالی نداشته باشد، برعکس css که عناصر افقی را می‌چیند و توجه به چینش افقی دارد که باعث می‌شود فضای خالی را در سایتمان داشته باشیم، jQuery Masonry برچینش عمودی تمرکز می‌کند و با هر پست متناسب با محل خود را جا می‌کند، تمام شکاف‌ها و فضاهای خالی از بین می‌رود. خب این توضیحات کتابخانه بریم سروقت نحوه نصب و کار این کتابخانه:

نصب کتابخانه:

یکی از دو مورد زیر را دانلود کنید (نسخه min فقط فشرده‌شده است.):

• pkgd.min.js
• pkgd.js

و اگر این فایل‌ها رو دانلود نکردید مسئله‌ای نیست برای برقراری ارتباط و اتصال مانند زیر عمل کرد در غیر این صورت آدرس مستقیم این فایل‌ها که دانلود کردید را بدهید.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

یا :

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

یا :

<script src="/path/to/masonry.pkgd.min.js"></script>

خب اتصال.js با سایت شما امکان‌پذیر شد.

الآن در html خود شبکه‌بندی را صدا بزنیم مانند دستور زیر:

<div class="grid">
 <div class="grid-item">...</div>
 <div class="grid-item grid-item--width2">...</div>
 <div class="grid-item">...</div>
...
</div>

الآن به‌راحتی می‌توان برای سایت ستون‌بندی و گرید (Grid) بندی انجام داد و مدیریت روی آن‌ها داشته باشیم. حالا وقتش هست با کمک css با توجه به نیازمان اندازه عناصر را مدیریت کنیم.

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

باید تابع را راه‌اندازی کنیم:

$('.grid').masonry({
// options
 itemSelector: '.grid-item',
 columnWidth: 200
});

این ظاهری که می‌بینیم، استایل های پیش‌فرض هستند که شما می‌توانید  آن‌ها را تغییر دهید. برای این کار باید برای div که کلاس js-masonry دادیم، از خصوصیت data-masonry-options استفاده کنیم. ویژگی‌های موجود:

• itemSelector: با استفاده از این خصوصیت می‌توان به این ابزار گفت که کدام عناصر را می‌خواهید تغییر بدین. در اینجا باید عناصری که کلاس itemدارند را به آن  بدهیم. به‌صورت زیر:

<div class="js-masonry" data-masonry-options=' {"itemSelector": ".item"} '></div>

• isOriginLeft: با استفاده از این خاصیت می‌توان مشخص کنید که گرید بندی، از راست به چپ باشد یا از چپ به راست. اگر true قرار بدین، از چپ به راست خواهد بود.
• isOriginTop: با استفاده از این خاصیت می‌توان مشخص کنید که گرید بندی، از بالا به پایین باشد یا از پایین به بالا. اگر true قرار بدین، از بالا به پایین خواهد بود.
• gutter: با استفاده از این ویژگی می‌توان برای هر ستون حاشیه قرار بدین و فاصله رو بیشتر کنید.

gutter: 10

برای تنظیم فضا بین عنصرها از margin، css استفاده می‌کنیم:

.grid-item {
 margin-bottom: 10px;
}

• transitionDuration: مدت‌زمانی که عنصر تغییر مکان یا تغییر ظاهر می‌دهد، که در css پیش‌فرض transitionDuration: ‘0.4s’می‌باشد.

// fast transitions
transitionDuration: '0.2s'
// slow transitions
transitionDuration: '0.8s'
// no transitions
transitionDuration: 0

برای مثال نگاهی کنید:

<div class="js-masonry" data-masonry-options=' {"itemSelector": ".item", "isOriginLeft": true, "isOriginTop": true, "gutter": 110} '></div>

برای اطلاعات بیشتر و آگاهی‌های لطفاً اینجا کلیک کنید.