سلام همه! امروز من می خواهم در مورد چگونگی بدون پلاگین و اسکریپت ها انجام دهم بلوک آجر سنگ تراشی(سنگ تراشی از انگلیسی - آجر سنگ تراشی)، یعنی، بلوک های ارتفاع های مختلف به زیبایی در هر یک از طرف های خالی بزرگ فاصله می گیرند. آره! همه اینها را می توان به راحتی با CSS انجام داد.
CSS دارای دارایی است که می توانید متن یا بلوک های چند منظوره ایجاد کنید. آنها از آن استفاده می کنند.
اموال نامیده می شود ستون ها. این یک ویژگی جهانی است که به شما اجازه می دهد تا بلافاصله عرض و تعداد ستون ها را تنظیم کنید. بیشتر در مورد آن شما می توانید در خواندن خوب CSS فهرست راهنما.
بنابراین، همه چیز در واقع بسیار ساده است. به عنوان مثال، ما 6 عنصر از ارتفاعات مختلف داریم، اما همان عرض. یک مثال روشن یک نوار کناری (ستون جانبی) در سایت ها است. همه بلوک های همان عرض، اما از ارتفاع های مختلف وجود دارد. معمولا B. نسخه موبایل سایت SiteBar پس از محتوای اصلی، در پایین سایت، و محتوای خود را تمام عرض صفحه را ایجاد می کند. به طور طبیعی، این سایت نیز در یک ستون غیر منطقی است، زیرا فضای آزاد زیادی در طرفین وجود خواهد داشت، به خصوص اگر از قرص نگاه کنید.
اما اگر بلوک اموال را تنظیم کند صفحه نمایش: Inline-Block، سپس آنها به طور خودکار، اگر به اندازه کافی از عرض ظرف وجود دارد، در چند ستون قرار می گیرد. با این حال، همه چیز ممکن است بسیار زیبا نگاه نکند:
موافقم، این نشانه ها بین بلوک ها به همه نگاه نمی کنند. بنابراین، فورا باید ثابت شود! برای این به بلوک کانتینر،که در آن بلوک ها قرار دارند، شما باید سبک های لازم را اضافه کنید:
موز ستون: 300 پیکسل خودکار؛ -Webkit ستون ها: 300 پیکسل خودکار؛ ستون ها: 300px خودکار؛
برای مرورگر متقابل، خواص برای مرورگرهای فایرفاکس و WebKit (Chrome، Safari، Android) استفاده کنید. به عنوان مثال، ما با بلوک های با آن مستقر هستیم لیست مشخص شده سپس سبک ها برای مثال در تصویر به نظر می رسد:
ul (عرض: 1050px؛ -moz-columns: 300px خودکار؛ -Webkit-columns: 300 پیکسل خودکار؛ ستون ها: 300 پیکسل خودکار؛) Li (صفحه نمایش: Inline-Block؛ جعبه سایه: 0 8px # 555؛ لیست سبک: هیچ کدام ؛ padding: 10px؛ عرض: 300 پیکسل؛ حاشیه پایین: 30px؛ عمودی-align: top؛)
در این مورد، بلوک ها در چندین ستون قرار می گیرند. حداقل عرض 300 پیکسل، و تعداد ستون ها به صورت خودکار توسط مرورگر تعیین می شود. مناسب برای ایجاد سازگاری مناسب است. که در این مورد 3 ستون وجود خواهد داشت، و این همان چیزی است که به نظر می رسد:
عرض ظرف (1050 پیکسل) باید انتخاب کنید اگر می خواهید فاصله بین بلوک های عمودی همزمان با فاصله به صورت افقی باشد. در غیر این صورت، عرض بین بلندگوها به صورت خودکار توسط مرورگر نصب می شود. دارایی ستون فقراتکه فاصله بین بلندگوها را تعیین می کند. اما در این مورد، همانطور که می خواهید کار نخواهد کرد.
گزینه دیگری وجود دارد: برای بلوک هایی که نیاز به تنظیم ویژگی عرض دارید: 100٪. همچنین، اگر اموال PADDING نصب شده باشد، همانطور که در مورد من، شما باید ملک جعبه را تنظیم کنید: Border-Box. در حال حاضر شما می توانید با خیال راحت می توانید اموال ستون GAP را به ظرف اضافه کنید تا فاصله بین ستون ها را تنظیم کنید. بنابراین آن را به عنوان مورد نیاز کار خواهد کرد.
موافقم، به نظر می رسد خیلی بهتر است! شما همچنین می توانید بلوک های "Div" را داخل کانتینر DIV قرار دهید. یا اگر شما نیاز به توزیع متن به چند ستون، به سادگی در برچسب "P" با، به عنوان مثال، کلاس متن متن مورد نظر را اضافه کنید و برای این کلاس ما یک ملک را تجویز می کنیم ستون ها..
این همه! بنابراین به سادگی بدون اسکریپت های غیر ضروری، می توانید بلوک ها را به صورت آجری یا متن در چندین ستون قرار دهید. اما توجه داشته باشید که در این مورد فقط زیبا خواهد بود اگر بلوک ها یکسان هستند. در مورد دیگری، تنها برای استفاده از یک اسکریپت خوب سنگ تراشی باقی می ماند. اسکریپت به طور خودکار هر بلوک را موقعیت می دهد. اما این موضوع دیگری است ...
این همه! اگر برخی از سوالات یا نظرات ظاهر شد، آنها را در نظرات قرار دهید. موفق باشید!
در بخش وبلاگ. این عکس تم وردپرس این مثال ما خواهد بود، اما شما احتمالا از استفاده از سنگ تراشی جی کوئری و سایر سایت های وردپرس دیده اید.
جی کوئری منسوری چیست؟
مصالح ساختمانی می تواند علاوه بر CSS در نظر گرفته شود، که با آن می توانید عناصر را به صورت افقی قرار دهید، بسته به عرض مانیتور به یک موقعیت عمودی تبدیل شوید. در نتیجه شکاف عمودی بین عناصر ارتفاع های مختلف به حداقل می رسد. اگر می خواهید نیز انجام دهید کمک CSS، به من اعتماد کن شما سردرد زیادی خواهید داشت.
در این مثال، شما می توانید اصل کار جالبی سنگ تراشی قبل و بعد از استفاده را ببینید:
اگر شما از شناور CSS استفاده می کنید، چگونه می توانید نتیجه را بر روی صورت ببینید: سمت چپ، سپس فواصل خالی وجود دارد، شما باید از موقعیت CSS استفاده کنید، که کاملا مشکل ساز است، اما چرا، چرا، در این امر کمک خواهد کرد که سنگ تراشی کمک کند.
ما از JQuery Mansory در سایت های وردپرس استفاده می کنیم
سنگ تراشی را می توان در دو مورد استفاده کرد. اولین زمانی است که تمام بلوک های شما با اطلاعات همان عرض هستند، در این مورد شما باید از این قطعه اسکریپت استفاده کنید:
|
اگر بلوک های عرض متفاوت دارید، باید از کد زیر استفاده کنید:
|
جایی که solumnwidth این عرض شبکه (در پیکسل) است. مصالح ساختمانی این دو قانون را دنبال خواهد کرد:
- عرض کلی عناصر (محاسبه شده با توجه به این فرمول) \u003d عرض CSS + Padding-right + Padding-left + Border-right-right-right + border-left + width + margin-right + حاشیه سمت چپ
- هنگام استفاده از ColumnWidth، تمام عناصر باید به صورت افقی در هر عرض ستون (به عنوان مثال، برای ColumnWidth: 200، موارد با 0 یا 200 یا 400 پیکسل و غیره آغاز می شود). ممکن است کاملا روشن نباشد، اما در این زمینه هیچ مشکلی وجود ندارد، ما به تصویر نگاه می کنیم.
اولین عنصر کل عرض 190 پیکسل و حاشیه راست: 0 و عنصر دوم حاشیه سمت چپ: 0، در تئوری، این دو عنصر باید یکدیگر را لمس کنند. اما از آنجا که ColumnWidth دارای مقدار 200px است، سپس عنصر دوم شروع به نمایش فاصله 200px می شود.
این فرایند اتفاق نخواهد افتاد اگر ما مقدار ستون ستون را در اسکریپت نداریم و تمام عناصر با یکدیگر شروع به کار نمی کنیم، بنابراین لازم است آنها را با حاشیه جدا کنیم.
بنابراین شگفتی جی کوئری مصالح ساختمانی و وردپرس 3 ..
حالا من کمی رمزگذاری میکنم برای شروع، کتابخانه های جی کوئری و مصالح ساختمانی را در فایل header.php متصل کنید. پرش به این کد در header.php (شما می توانید شما را در یک سایت خاموش دانلود کنید):
// اتصال jQuery// Connect Mastonry
اطمینان حاصل کنید که 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 class \u003d "masonry_box" پست های ما را با استفاده از اسکریپت نمایش می دهد. در حال حاضر CSS، شما می توانید content_maasonry را به عنوان مثال عرض 100٪ انجام دهید، پس شما نیازی به درمان، اما اگر شما یک عرض ثابت از content_masonry، شما باید محاسبات لازم را انجام دهید. به عنوان مثال، شما 4 ستون با پست ها را ایجاد می کنید، هر کدام دارای عرض + Padding 190px و حاشیه راست: 10px، سپس اندازه محتوا Content_maasonry Contenter 200 x 4 \u003d 800px:
#Content_masonry (عرض: 800 پیکسل؛) #Content_Masonry .Masonry_Box (عرض: 170px؛ Padding: 10px؛ حاشیه راست: 10px؛ حاشیه پایین: 10px؛)
#Content_masonry ( عرض: 800 پیکسل؛ #Content_masonry .Masonry_Box ( عرض: 170 پیکسل؛ padding: 10px؛ حاشیه راست: 10px؛ حاشیه پایین: 10px؛ |
در حال حاضر برای اضافه کردن پی اچ پی، که HTML را تولید می کند، در این مورد من از WP_Query برای نمایش 20 پست از رده سنگ تراشی استفاده می کنم، به عنوان مثال، در صفحه نمایش (صفحه .php):
< div id = "content_masonry" > $ linksposts \u003d جدید WP_QUERY ()؛ $ linksposts -\u003e پرس و جو ("showposts \u003d 20 و cat \u003d 10")؛ heal_posts ()): $ linksposts -\u003e the_post ()؛ ؟\u003e < div class = "masonry_box" > < div class = "masonry_box_inner" > < h2 > < a href = " ID، "URL"، TRUE)) echo get_post_meta ($ post -\u003e ID، URL، true)؛ دیگر the_permalink ()؛ ؟\u003e "> < / a > < / h2 > |
روز خوبی برای همه! این مقاله دوم من در سال جاری است. من اولین بار در مورد فونت آیکون به تازگی منتشر کردم و خوشحالم که زمان را برای نوشتن مقاله دوم با چنین حاشیه کوچکی پیدا کردم. تا کنون، برای من یک شکاف کوچک است، زیرا اغلب هیچ فرصتی را بنویسید، اما من سعی می کنم. 😎 و اکنون بیایید با آنچه که در این مقاله مورد بحث قرار می گیرد، مقابله کنیم.
شاید بسیاری از شما در سایت ها محل سکونت عناصر (تصاویر، مقالات، بلوک های مختلف) آجر را دیده اید. شما می گویید - آیا این امکان وجود دارد که از طریق CSS انجام شود؟ شاید این امکان وجود دارد، اما تنها چنین انعطاف پذیری نخواهد بود. این اسکریپت خود را در صفحه با استفاده از فضای عمودی قرار می دهد. همچنین، هنگام بلوک های موقعیتی، اسکریپت انیمیشن را اضافه می کند. ممکن است آن را در طراحی تطبیقی \u200b\u200bسرزنش کنید، پنجره مرورگر را کاهش دهید. بنابراین، این همه با یک کتابخانه جاوا اسکریپت کوچک - سنگ تراشی به دست می آید. این اسکریپت به طور گسترده ای در طرح های روند مدرن استفاده می شود. من نمی دانم که چگونه در روسیه-پگان، اما در اینترنت گران قیمت، محبوبیت زیادی محبوبیت.
نویسنده هنرمند دیوید Desandro از ایالات متحده آمریکا است. من می خواهم به او بگویم که از این اسکریپت خوب بسیار سپاسگزارم. این کتابخانه کاملا رایگان توزیع شده است، بنابراین شما می توانید با خیال راحت از آن در وب سایت خود استفاده کنید.
من فکر می کنم بسیاری دوست داشتم در واقع، همه چیز به نظر بسیار خوب است. بیایید با چگونگی کار با سنگ تراشی مقابله کنیم، چگونه بلوک هایمان را در سایت ما با یک اثر آجر بردارید؟
ساختار مقاله
اول، ما باید به صفحه اسکریپت برویم - http://maasonry.desandro.com و آخرین نسخه را دانلود کنید. در زمان نوشتن این مقاله، این نسخه 4.0 است. همچنین در این سایت شما مستندات دقیق را به زبان انگلیسی خواهید یافت. من به سناریوی نکات اصلی از اسناد اشاره می کنم - نحوه اتصال، کدام گزینه ها در دسترس هستند، و غیره من همه چیز را تحت تاثیر قرار نمی دهم، زیرا من خودم آن را در برخی از نکات ندیده ام. برای معرفی به سایت خود، باید حداقل اقدام را انجام دهید. شما در حال حاضر به این عادت کرده اید.
در وب سایت دانلود دو نسخه از اسکریپت وجود دارد - فشرده شده (حداقل) و بدون فشرده شده است. بهتر است از دقیق استفاده کنید - masonry.pkgd.min.js. همچنین، کتابخانه را می توان از CDN بارگیری کرد:
غیر فشرده
فشرده (حداقل)
من به شما توصیه می کنم نسخه به حداقل شده سنگ تراشی را از CDN وصل کنید. بنابراین تعداد درخواست های HTTP غیر ضروری را کاهش می دهیم. به طور کلی، هر آنچه که اسکریپت را وصل می کنید، اگر بتوانید نسخه معدنی را با CDN وصل کنید، آن را وصل کنید.
برای کار سنگ تراشی، ما باید یک بلوک پدر و مادر ایجاد کنیم و عناصر را در آن قرار دهیم.
برای وضوح، من یک صفحه آزمایشی با تصاویر اندازه های مختلف ایجاد کردم. من تصویر را به عنوان نمونه ای از عناصر گرفتم، زیرا آنها ارتفاع های مختلفی دارند، اما به جای عکس ها می توانند هر بلوک وجود داشته باشند: متن، ویدئو، و غیره سعی کنید پنجره مرورگر را کاهش دهید و عکس ها را مشاهده خواهید کرد.
بیایید ببینیم کد HTML به نظر می رسد:
...
#Container (Border: 1px Solid #CCC؛ حاشیه: 0 خودکار؛ Padding: 50px 0؛ حداکثر عرض: 1170 پیکسل؛) / * عنصر مش * /. مورد (مرز: 2px جامد RGBA (0، 0، 0، 0، 0، 0، 0.35)؛ حاشیه پایین: 15px؛ Padding: 1px؛ عرض: 280 پیکسل) / * / عنصر مش * / H1 (Text-align: Centre؛ حاشیه: 0 50px)
همانطور که می بینید، CSS در اینجا حداقل استفاده می شود.
راه اندازی پلاگین سنگ تراشی
شما می توانید این کار را به روش های مختلف انجام دهید.
راه اندازی ساخت و ساز از طریق جاوا اسکریپت
شما می توانید از سنگ تراشی به عنوان پلاگین جی کوئری استفاده کنید:
$ ("انتخابگر"). سنگ تراشی ()؛
اما به خاطر داشته باشید که برای این روش شما باید به کتابخانه جی کوئری متصل شوید:
در صفحه نسخه ی نمایشی من مصالح ساختمانی را به عنوان جی کوئری پلاگین، I.E. من کد اولیه اولیه زیر را دارم:
jQuery (document) .Ready ($) ($) ($ ("عناصر خطی"). مصالح ساختمانی (// / / گزینه های اقلام: "آیتم های"، collowwidth: 300))؛)؛)؛)؛)؛
اگر شما روش "Masonry ()" را جلب کردید، ما دو گزینه را گذراندیم: آیتم هالیکتور و ColumnWidth. این دو گزینه مورد نیاز است. به گفته توسعه دهنده، آنها برای عملیات عادی اسکریپت ضروری هستند. با این حال، ما در مورد گزینه های درست در زیر صحبت خواهیم کرد. همه چیز، پس از این اقدامات، باید همه چیز را انجام دهد.
مقداردهی اولیه با وانیل جاوا اسکریپت
شما می توانید از سنگ تراشی نیز با Vanilla JS استفاده کنید:
مصالح ساختمانی جدید (ELEM، OPTIONS)
سازنده مصالح ساختمانی دو استدلال را انجام می دهد: یک عنصر کودک از ظرف و یک گزینه شیء. کد اولیه سازی موارد زیر خواهد بود.
var elem \u003d document.queryselector (". عناصر گرید")؛ var msnry \u003d جدید MASONRY (ELEM (/ / / / / / گزینه های آیتم ها: "آیتم های"، ColumnWidth: 200))؛ // Element Argument می تواند یک رشته انتخابی // برای یک عنصر فردی var msnry \u003d Masonry جدید (". عناصر گرگ"، (// گزینه ها))؛
صادقانه، من با Vanilla JS کار نمی کردم، بنابراین، من نمی توانم به طور خاص بگویم آنچه که آن را خوب از jQuery. فقط می دانم که چنین روش ای وجود دارد.
مقداردهی اولیه از طریق HTML.
شما می توانید سنگ تراشی را از طریق HTML راه اندازی کنید، بدون نوشتن یک کد جاوا اسکریپت تک خط. برای انجام این کار، شما نیاز به اضافه کردن مخزن "داده-سنگ تراشی" به تمام عناصر کودک اضافه کنید. گزینه ها را می توان به عنوان یک مقدار منتقل کرد.
پارامترهای منتقل شده باید با فرمت JSON مطابقت داشته باشند. من می خواهم توجه شما را به استفاده از نقل قول ها در کد جلب کنم. نقل قول ها برای ویژگی داده ها-سنگ تراشی تک تک و برای گزینه های انتقال - دو برابر. کسانی که. این است که چگونه در مثال نشان داده شده است.
این گزینه را می توان مورد استفاده قرار داد اگر شما نمی خواهید از جاوا اسکریپت اضافی در سایت استفاده کنید. به عنوان مثال، من بلافاصله جی کوئری را حمل نمی کنم اگر او در هر نقطه از سایت استفاده نشود.
در اینجا چنین کتابخانه ای است. هیچ چیز پیچیده نیست بعدا چی؟
اندازه عناصر
ابعاد عناصر دختر می تواند هر دو ثابت و لاستیک باشد. با اندازه ثابت (عرض و ارتفاع) از عرض بلوک بلوک ها و طراحی در فایل یکپارچه CSS تنظیم شده است. ارتفاع من می خواهم بگویم اگر شما از بلوک های خالی استفاده نکنید، ارتفاع بلوک با مرورگر بر اساس محتویات آن درمان می شود. در مورد من، من از ارتفاع نمی خواهم، زیرا تصاویر تا ارتفاع خود را داشته باشید.
...
شبکه لاستیکی
با یک شبکه لاستیکی، عرض عناصر به عنوان یک درصد تنظیم شده است. شبکه لاستیکی عمدتا در طراحی سازگار استفاده می شود. ما در مورد گزینه های زیر بیشتر صحبت خواهیم کرد.
...
تصاویر
گاهی اوقات، هنگامی که صفحه بارگذاری می شود، ممکن است اتفاق بیفتد که عناصر یکدیگر را همپوشانی کنند. در عین حال، آنها به همه در یک توده می روند و به نظر می رسد وحشتناک است. بنابراین شما می توانید این مشکل را با یک کتابخانه کوچک حل کنید - تصاویر. بهترین چیز با من با طراحی سازگار ظاهر شد. این زمانی بود که من سایت را از یک تلفن همراه باز کردم، یک شبکه از تصاویر من به یک شمع رفتم.
اتصال تصاویر با CDN:
با استفاده از آیتم ImageLaaded تنها پس از بارگذاری کامل آن در صفحه قرار گرفته است.
// init masonry var $ grid \u003d $ (". شبکه"). سنگ تراشی (// // گزینه ها ...))؛ // طرح بندی سنگ تراشی پس از هر تصویر بارها $ grid.imagesloaded (). پیشرفت (عملکرد () ($ grid.maasonry ("طرح بندی")؛))؛
یا راه اندازی ساختمان سازی تنها پس از بارگذاری کامل تمام تصاویر رخ می دهد.
var $ grid \u003d $ (". شبکه"). تصاویر (تابع () (// init masonry پس از تمام تصاویر بارگذاری $ grid.masonry (/ / / گزینه های ...))؛))؛
گزینه ها (گزینه ها)
حالا بیایید تعجب کنیم که چه چیزی می توانیم روش گزینه ها را منتقل کنیم مصالح ساختمانی ().
تمام گزینه ها گروه بندی شده اند خوب، این کار انجام می شود به طوری که آن را آسان تر به آنها حرکت.
حالا بیایید ببینیم چه گزینه هایی در یک گروه خاص گنجانده شده است.
اقلام
این گزینه نشان می دهد که عناصر اثر سنگ تراشی اعمال می شود. مفید است که این گزینه را مشخص کنید، زیرا ما می توانیم مواردی را که بخشی از طرح نیستند را قطع کنیم. این پارامتر در حال حاضر برای ما آشنا است، زمانی که ما مقداردهی اولیه سنگ تراشی را از هم جدا می کنیم.
اقلام: "آیتم"
عرض ستون.
عرض عناصر طرح را مشخص می کند. اگر این پارامتر از سنگ تراشی خارج شود، عرض خارجی عنصر اول را می گیرد. توسعه دهنده همیشه توصیه می کند که عرض بلندگوهای را مشخص کند، چه عناصر ثابت یا لاستیکی است.
ColumnWidth: 80.
اندازه عنصر (اندازه عنصر)
اگر ما می خواهیم طرح ما را با عناصر لاستیکی، به عنوان مثال، با طراحی سازگار، پس از آن برای این اهداف، پارامتر وجود دارد که شبکه لاستیکی ما را ایجاد می کند.
درصد
ما کد شبکه لاستیکی را بالا می بریم، اما گزینه ها به جزئیات نرسیده اند.
...
همانطور که می بینیم، برای فعال کردن شبکه لاستیکی، پارامتر درصد را به کد اولیه با ارزش بولین اضافه کردیم " درست است، واقعی.". و به عنوان یک عرض، کلاس یک عنصر را نشان داد که عرض آن در درصد در CSS اختصاص داده شده است.
چاله
بین عناصر، شما می توانید یک افقی ناپایدار را با استفاده از گزینه تنظیم کنید. چاله، عبور از شماره این شماره به عقب نشینی در پیکسل ها مربوط می شود.
Gutter: 15.
ضایعات عمودی بین عناصر در CSS تنظیم شده است.
عنصر عنصر (حاشیه پایین: 15px؛)
ENDIDS را می توان به عنوان یک درصد تعیین کرد، به عنوان مثال آنها بسته به اندازه پنجره مرورگر متفاوت خواهند بود.
...
قبل از لیست موارد، یک بلوک خالی Div را ایجاد کردیم.
CSS برای این بلوک عرض را در درصد نشان داد. و در گزینه کد اولیه چاله ما کلاس این عنصر خالی را نشان دادیم. این اسکریپت خود را در درصد ایجاد می کند، بر اساس عرض این بلوک.
مهر.
این گزینه را می توان اقلام را که در شبکه سنگ تراشی مهر می شود اختصاص داده شده است. عناصر باقی مانده زیر خواهد بود و مهر مهر و موم شده است. گاهی اوقات می تواند مفید باشد. گزینه ها مهر. ما کلاس عنصر مهر زنی را منتقل می کنیم.
تمبر: ".stamp"
شما می توانید در Codepen دقیق تر نگاه کنید، و همچنین در صورت لزوم ویرایش کنید.
fitwidth
ماهیت این گزینه این است که وقتی ما آن را با بلوک عنصر والدین فعال می کنیم، یک عرض ثابت در پیکسل ها اضافه شده است. علاوه بر این، عرض بلوک پدر و مادر برابر با مقدار عرض تمام عناصر کودک است. بنابراین، مشخص کردن در قانون بلوک CSS والدین " حاشیه: 0 خودکار»ما می توانیم یک بلوک را با عناصر سنگ تراشی در مرکز قرار دهیم.
عناصر گرید (حاشیه: 0 خودکار؛) Isfitwidth: درست است
توجه! این گزینه با عناصری که عرض آن در درصد نشان داده شده کار نمی کند. مقدار گزینه "ColumnWidth" باید در پیکسل ها، به عنوان مثال، "ColumnWidth: 120" مشخص شود. در غیر این صورت، عناصر را می توان به یکدیگر منتقل کرد.
bormingleft
به طور پیش فرض، تمام عناصر مش به سمت چپ تقسیم می شوند. با گزینه bormingleft شما می توانید جریان افقی موارد را تغییر دهید و هماهنگی را به سمت راست سمت چپ تنظیم کنید. کافی است که ارزش بولین را منتقل کنید " نادرست. "
Bormingleft: FALSE
ریشه کن
همچنین، و همچنین به صورت افقی، عناصر شبکه پیش فرض در لبه بالا قرار می گیرند. با گزینه ریشه کن شما می توانید جریان اقلام را به صورت عمودی تغییر دهید و هماهنگی را از پایین به بالا تنظیم کنید، تقریبا همانطور که در تتریس 🙂.
origintop: false.
راه اندازی (راه اندازی)
به گزینه های تنظیمات بروید
کانتینر
این گزینه سبک های عناصر کانتینر اصلی را لغو می کند. به طور پیش فرض، والدین به "موقعیت: نسبی" تنظیم می شوند. این قانون را می توان لغو کرد.
Containerstyle: null
البته، ممکن بود از طریق فایل CSS با استفاده از "! مهم" لغو شود، اما من دوست ندارم این کار را انجام دهم. به طور کلی، من فکر می کنم این یک قانون بد تن در طرح است. بهتر است سبک ها را تمیز کنید، بیشتر توسعه دهنده به ما این فرصت را می دهد.
انتقال انتقال
مدت زمان انتقال زمانی که اقلام مکان خود را تغییر می دهند. زمان پیش فرض تنظیم شده است - 0.4 ثانیه. فرمت زمان به عنوان فرمت زمان CSS تنظیم شده است.
انتقال انتقال: "0.4S"
در اینجا چند نمونه از تنظیم زمان وجود دارد.
// سریع انیمیشن انتقال: "0.2S" // Slow Enimation Transitionduration: "0.8s" // هیچ انتقال انیمیشن: 0
تغییر اندازه دادن
با استفاده از این گزینه، می توانید تغییر را در اندازه بلوک پدر و مادر لغو کنید. کسانی که. به طور پیش فرض، اگر شما یک اندازه ثابت را به والدین مشخص نکنید، با کاهش در صفحه مرورگر، عناصر شبکه های کودک ما موقعیت خود را تغییر می دهند، حرکت می کنند، فضای آزاد را اشغال می کنند. بنابراین با گزینه "تغییر اندازه"، می توانید انتقال را لغو کنید.
تغییر اندازه: نادرست
صادقانه، همان اثر را می توان به دست آورد اگر شما از پدر و مادر فقط یک اندازه ثابت است. در اینجا من توسعه دهنده را درک نمی کنم - هر دو چیزی اشتباه درک می کنم، یا این گزینه در موارد خاص صورت می گیرد. شما می توانید جزئیات بیشتری را در مورد مثال در کدپن ببینید. سعی کنید اندازه صفحه نمایش مرورگر را تغییر دهید. سپس تغییر دهید "تغییر اندازه: نادرست" در "تغییر اندازه: درست" و شما درک می کنید که ما در مورد آن صحبت می کنیم.
initlayout
این گزینه شبکه آجری ما را هنگام راه اندازی اسکریپت فعال می کند. به طور پیش فرض، آن را روشن است - "initlayout: true". اما شما می توانید لغو کنید
initlayout: false
قبل از فعال کردن شبکه، می توانید از روش ها و رویدادها استفاده کنید. به عنوان مثال، شما می توانید انجام دهید تا شبکه شما با کلیک کردن بر روی یک دکمه خاص فعال شود. خوب، سپس چیزی شبیه آن.
در این مقاله، من حوادث و روش ها را رد نخواهم کرد، زیرا مقاله به طوری که حجم حجمی معلوم شد. شما می توانید آنها را به طور مستقل در وب سایت توسعه دهنده کشف کنید. همچنین نمونه هایی از پیاده سازی را پیدا خواهید کرد. همه چیز کاملا قابل فهم است نه همیشه توسط نویسندگان اسکریپت ها دستورالعمل هایی نوشته شده است. برای دستورالعمل توسعه دهنده مصالح ساختمانی، من سخت می کنم - 5 . 🙂
سنگ تراشی بر روی CSS خالص
همچنین گزینه ای برای پیاده سازی آجری در CSS خالص وجود دارد. من تمام کد را در اینجا نخواهم داد. شما می توانید به کدپن نگاه کنید، هیچ چیز پیچیده ای وجود ندارد. در این مورد، این واقعیت مناسب است که شما نیازی به اتصال کتابخانه های اضافی JS ندارید و گزینه های پلاگین را درک کنید.
در اصل، همه آنچه که من در بالا ذکر کردم، به اندازه کافی برای استفاده از اثر آجر در وب سایت شما کافی است.
و در این همه. با تشکر از همه شما برای توجه شما. سوالات را در نظرات مشخص کنید، من همیشه خوشحال خواهم شد که کمک کنم. شما را در مقالات زیر مشاهده کنید. تا زمان!
من گفتم که چگونه یک طراحی وبلاگ جدید را تغییر دهم، به طور ساده ای معتقد است که تمام کارهای مهم قبلا ساخته شده است. اما، همانطور که معلوم شد، هنوز کارهای زیادی وجود داشت. علاوه بر این، من بخشی از آن را ایجاد کردم. اما اولین چیز اول. در این پست، سوالات زیر را لمس خواهم کرد:
- نحوه معرفی تراشه های جدید وردپرس در موضوع ثبت نام - فرمت های ضبط؛
- نحوه رفع مشکلات بلوک بلوک در اسکریپت سنگ تراشی؛
- نحوه پیاده سازی سنگ تراشی به هر سایت.
بنابراین، در مورد ماسون ها و جاوا اسکریپت چیست؟ به نظر می رسد یک نقطه مشترک از تماس وجود دارد! امیدوارم همه بدانند که چه کسانی هستند که ماسون ها هستند. اگر نه، در اینجا یک تعریف مختصر وجود دارد:
ماسون هایا فرانک ماسون ها - در ترجمه ادبی "آجر آزاد"، جنبش که در قرن XVIII به شکل یک سازمان بسته ظاهر شد، جنبشی بود. فراماسونری منشاء خود را از منابع کمی شناخته شده در انتهای XVI می گیرد - آغاز قرن XVII، ادعا می شود کارگاه های عملیاتی میسون. تمام فعالیت های ماسون ها بسیار نمادین هستند، بسیار با نماد معماری مرتبط است و یکی از شخصیت های اساسی یک هرم کوتاه است.
من بسیار علاقه مند به ماسون ها هستم و همه چیزهایی که با آنها ارتباط دارد. خیلی جالب است. من می خواهم با یک ماسون واقعی صحبت کنم (اما نه با چنین، که فقط به خاطر Ponte است، خود را یک آجر آزاد آزاد، یعنی، با یک استاد واقعی). اما این مورد نیست. و در این واقعیت که در موضوع طراحی پینبین از اسکریپت استفاده می کند که باعث می شود بلوک ها با اطلاعیه های سوابق به عنوان آجر تشکیل شود. در حال حاضر یک سبک بسیار محبوب است، راه های مختلفی برای پیاده سازی چنین اثر استفاده می شود، اما یکی از بهترین ها بدون شک جاوا اسکریپت است سنگ تراشی.
وب سایت رسمی این جاوا اسکریپت Masonry.desandro.com است، نشان می دهد که چگونه کار می کند و نشان می دهد که چگونه آن را به سایت وصل کنید. علاوه بر این، می تواند هر سایت باشد، نه لزوما وردپرس، A و DLE و به طور کلی HTML استاتیک. اما لازم به ذکر است که در وردپرس از آخرین نسخه ها (از 3.8، اگر من اشتباه نکنم) اسکریپت سنگ تراشی در حال حاضر در بسته پایه گنجانده شده است. اما همانطور که قبلا ذکر شد - همه چیز به ترتیب.
چگونه برای پیاده سازی در موضوع وردپرس پشتیبانی از فرمت های پشتیبانی از فرمت؟
بنابراین در فرآیند پالایش، تصمیم گرفتم در موضوع من از ثبت نام توابع از دست رفته توابع از دست رفته در آن، به طوری که در اصلی می تواند وضعیت، گالری، یک تصویر یا ویدیو را با طراحی های مختلف این بلوک ها منتشر کند. من در آرشیو طراحی روبرو شدم و تعداد زیادی از موضوعاتی را که از این تابع پشتیبانی می کنم پیدا کردم.
اما اگر وردپرس خود را به روز کنید، فرمت های سوابق را می توان در موضوع اجرا کرد، و این آسان است. بنابراین، ابتدا فایل را باز کنید functions.phpتم شما از ثبت نام و اضافه کردن کد زیر به آن:
add_action ("after_setup_theme"، "slug_post_formats")؛ تابع slug_post_formats () (پس از فرمت ها، آرایه ("کنار"، "تصویر"، "ویدئو"، "صوتی"، "نقل قول"، "لینک"، "گالری"، "چت"، "وضعیت"، ")؛ )
این کد را می توان به هر مکان فایل وارد کرد. functions.php، نکته اصلی این است که هیچ تابع را شکست ندهید. اگر همه چیز به درستی انجام شود، هنگام ایجاد یک رکورد جدید، باید یک بلوک فرمت جدید داشته باشید، اگر نه، منوی «تنظیمات صفحه» را در بالای صفحه باز کنید و بلوک های مفصل را علامت بزنید.
اما این ویژگی کار نخواهد کرد تا زمانی که فایل های خاص در پوشه با موضوع ظاهر شوند، با نام نوع content-shode.php. - به نام "چیزی" فایل، این نشانه ای از قالب فرمت این فایل خواهد بود.
اونها می تونند ... باشند:
فرمت ها لازم نیست از همه چیز استفاده کنند، اما شما می توانید در کد بالاتر از آنهایی که به عنوان مثال نیاز دارید، مشخص کنید، اگر فقط به یک ویدیو، یک تصویر و گالری نیاز دارید، سپس وارد شوید functions.phpچنین کد:
add_action ("after_setup_theme"، "slug_post_formats")؛ تابع slug_post_formats () (پس از فرمت ها، آرایه ("تصویر"، "ویدئو"، "گالری"،))؛)
خوب، شما فقط به فایل هایی که در خط ذکر شده اند نیاز دارید: content-image.php، content-video.phpو content-gallery.php. یک مثبت content.php. برای سوابق عادی این فایل ها از کجا می آیند؟ شما می توانید آنها را از موضوع twentyfurteen (یا هر فرمت پشتیبانی دیگر، به عنوان مثال، جعبه) و سپس اصلاح کنید. فقط این موضوع را به رایانه خود دانلود کنید، فایل هایی را که نیاز دارید را انتخاب کنید و با طراحی خود به سرور به پوشه بروید. پس از آن، آنها در کنسول در بخش ظاهر خواهند شد ظاهر -\u003e ویرایشگر. علاوه بر این، این فایل ها باید به فرمت مورد نیاز برسند، شما همچنین باید سبک های خود را در فایل ایجاد کنید style.css.
این یک کار سختگیرانه است، اما صدها برابر خواهد پرداخت. من نمونه هایی از چنین فایل هایی را نشان خواهم داد (تقریبا من از آن در این وبلاگ استفاده می کنم):
محتوا status.php فایل:
فایل های Content-video.php و content-gallery.php کاملا یکسان است:
فایل content.php:
">
کمی حفر کردن، شما می توانید آنچه را که قالب های خود را برای فرمت های سوابق ایجاد کنید، کشف کنید. در عین حال، شما نباید درباره سبک های CSS را فراموش کنید. اما در اینجا من نمی توانم هیچ توصیه ای را ارائه دهم زیرا این یک سوال بسیار خاص است و بستگی به موضوع خاصی از ثبت نام دارد.
اگر مشکلات بوجود می آیند، یا چیزی غیر قابل درک است - شما می توانید در نظرات کمک کنید تا من بتوانم.
خوب، فرمت های سوابق به طور کامل تعبیه شده و کار می کنند. اما چیزی وجود نداشت ... آنها به خوبی کار می کردند، اما با اسکریپت سنگ تراشی آنها نمی خواستند دوستان باشند. به عنوان مثال، هنگام قرار دادن یک گالری با استفاده از فرمت ضبط مناسب، تحت گالری یک فضای بزرگ وجود داشت، در مورد همان طبیعت، که از پست قبلی است، جایی که من در مورد شکاف های عجیب و غریب بین اطلاعیه ها هنگام استفاده از فونت های وب از گوگل صحبت کردم فونت ها در اینجا این مشکلات ما یاد می گیریم که در زیر تصمیم بگیریم.
نحوه رفع مشکلات بلوک بلوک در اسکریپت سنگ تراشی
اجازه دهید به شما در مورد ماهیت مشکل یادآوری کنم: هنگام استفاده از فونت گوگل فونت در کار اسکریپت سنگ تراشی، مشکلات به شکل ارتفاع مختلف شکاف بین اطلاعیه های مقالات ظاهر شد. همان اثر، تنها بسیار قابل توجه و استفاده از فرمت های رکورد، به ویژه در هنگام قرار دادن گالری گالری کاشی از Jetpack Pagin.
همانطور که گفتم، از بسته Jetpack در وبلاگم استفاده می کنم، که در آن یک پلاگین شگفت انگیز از گالری های کاشی مد روز وجود دارد، اما هنگام قرار دادن چنین گالری تحت یک دوره بزرگ ظاهر شد:
اسکریپت مصالح ساختمانی سرزنش می شود، این اسکریپت سنگ تراشی است: هنگام استفاده از فونت های وب، آن را زودتر از فونت ها کار می کند و بنابراین، در پایان بار صفحه کامل، بلوک ها کمی مسطح هستند. ممکن است گزینه دیگری وجود داشته باشد - زمانی که بلوک ها در ابتدا صاف شوند، و سپس به یکدیگر حرکت می کنند.
گالری در مورد همان است: هنگام ساخت گالری کاشی زیبا گالری گالری از جتپاک، یک اسکریپت که اندازه تصاویر را محاسبه می کند، زمان زیادی را صرف می کند (و آن را در مراحل مختلف انجام می دهد)، و سنگ تراشی سریع تر کار می کند موقعیت بلوک ها از اولین اطلاعات ورودی (متوسط) استفاده می کنند که اسکریپت گالری کاشی را باز می گرداند. بنابراین، این شکاف ظاهر می شود.
برای مبارزه با این در وب سایت رسمی Masonry (نگاه کنید به بالا) توضیحات وجود دارد: بخش ها تصاویر و فونت های وب. شما می توانید با روش های رسمی در لینک های مشخص آشنا شوید. اما برای ساده سازی کار برای اصلاح این خطاها، من توصیه های من را ارائه خواهم داد.
برای مدیریت پارامترهای اسکریپت سنگ تراشی، از فایل استفاده می کنم functions.js در آن من دستورالعمل های لازم را تجویز می کنم و آن را در قالب آن وصل می کنم. اول، من پارامترهای انیمیشن را مشخص می کنم، و سپس کد را اصلاح خطا وارد کنید. من محتوای این فایل را به طور کامل با نظرات ارائه می دهم، می توانید از آن استفاده کنید با تقریبا هیچ تغییری استفاده کنید:
/ * تعریف پارامترهای اصلی سنگ تراشی * / jQuery (سند) .Ready ($ (# post-area). مصالح ساختمانی (/ * شناسه بلوک را نشان می دهد که ما از مصالح ساختمانی استفاده می کنیم * / Isanimated: درست، / * برای غیرفعال کردن انیمیشن بلوک، محل False * / AnimationOptions: (مدت زمان: 500، / * سرعت انیمیشن در میلی ثانیه * / easing: "خطی"، صف: false))؛))؛))؛ / * اصلاح مشکلات با گالری * / / * فعال کردن اعدام * / / / * تاخیر اجرای تا زمانی که تمام تصاویر بارگذاری شوند * / / * شروع * / (تابع (# پس از منطقه ")؛ / * توجه: در اینجا شما نیز نیاز دارید برای مشخص کردن شناسه بلوک * / $ container.imagesloaded (tucker () ($ container.masonry ()؛))؛)) (jQuery)؛ / * end * / * رفع مشکلات با فونت های وب * / / * شروع * / تابع triggermaasonry () (اگر (! $ container) (بازگشت؛) $ container.masonry (())؛ $ (function () $ container \u003d $ ("# پست منطقه")؛ triggermaasonry ()؛))؛ typekit.load ((فعال: triggermasonry، غیر فعال: triggermasonry))؛ /* پایان */
برای مثال، آنچه را که شما نیاز دارید انتخاب کنید، و نظرات و بخش های غیر ضروری اسکریپت را می توان حذف کرد، مثلا اگر شما تنها یک مشکل با فونت های وب دارید، تاخیر زمانی که بارگذاری تصاویر را می توان حذف کرد.
این فایل را در قالب وصل کنید. در پرونده موضوع header.php.قبل از بسته شدن برچسب قرار دادن:
به هر حال، این کد را می توان به طور مستقیم در صفحه متصل کرد، همچنین قبل از برچسب بسته شدن قرار دادن:
اثر تقریبا یکسان خواهد بود، هرچند جاوا اسکریپت به درستی به فایل متصل است.
به هر حال، اگر شما وردپرس دارید، سپس اسکریپت سنگ تراشی خود را وصل کنید و فایل تنظیمات از طریق فایل امکان پذیر است. functions.phpدر موضوع شما، فقط اضافه کردن کد به آن:
تابع mason_script () (wp_register_script ("مصالح ساختمانی"، "/ input j. / file / maasonry.pkgd.min.js")؛ wp_enqueue_script ("masonry.functions"، "path / to / file / functions.js")؛ wp_enceue_script ("سنگ تراشی")؛) add_action ("wp_enqueue_scripts"، "mason_script")؛
البته، این همه دستورالعمل های دقیق و راهنمای عمل نیست، اما تنها توصیه های عمومی، از آنجا که هر مورد منحصر به فرد است و ایجاد راهنمای جهانی تقریبا غیر ممکن است. اگر سوالی دارید - در نظرات بپرسید.
نحوه پیاده سازی سنگ تراشی به هر سایت
اکنون تصور کنید که وضعیت سایت ما نیست CMS وردپرس آخرین نسخه، اما بگذارید بگوییم DLE (موتور DataLife) و ما همچنین می خواهیم چنین مکان زیبا از بلوک ها با استفاده از سنگ تراشی.
همه بسیار ساده است اول، شما از فیس بوک وب سایت رسمی دانلود کنید masonry.pkgd.min.js. . آن را به سرور خود بریزید و آن را در قالب وصل کنید. برای DLE در فایل موضوع main.tpl به برچسب بسته شدن قرار دادن:
در حال حاضر ما ساختار بلوک را تعریف می کنیم که در آن سنگ تراشی کار خواهد کرد. به عنوان مثال، بنابراین:
در CSS شما نیاز به مشخص کردن چیزی مانند:
Mason-Box (عرض: 25٪؛). Mamason-Box Wide (عرض: 50٪؛)
در حال حاضر صفحه باید عملیات اسکریپت را راه اندازی کند:
حالا من در یک مثال واقعا در حال اجرا نشان خواهم داد:
1. فایل را وصل کنید masonry.pkgd.min.js. همانطور که در بالا نشان داده شده.
2. در صفحه از طریق HTML، ابتدایی اسکریپت:
3. زیر در CSS ثبت شده است:
HalfNews-content (Padding: 0 5px 5px 10px؛ حاشیه پایین: 15 پیکسل؛ مرز: 1 پیکسل جامد # E9E9E9؛ -Webkit-Box-Shadow: 0 0 1 پیکسل #BBB؛ -Moz-Box-Shadow: 0 0 1PX #BBB؛ جعبه سایه: 0 0 0 1 پیکسل #BBB؛ عرض: 345 پیکسل؛ / * آیتم بسیار مهم - یک عرض بلوک * / / * وجود دارد اگر بیش از شما نیاز دارید، سپس بلوک یا نمی تواند * / / * هماهنگ شده به صورت افقی یا محصور شود در یک دوست * / حاشیه سمت چپ: 10px؛ / * آن را به فاصله به صورت افقی بین بلوک * /) تنظیم شده است
در اینجا یک طرح ساده در صفحه اصلی وب سایت Technotron (که در آن محتوای در دو ستون قرار دارد) است.
خودشه. اگر من به جایی اشتباه بودم، به طور مستقیم نبود، فقط یک پست سریع نبودم و من خیلی زیاد می خواستم، بنابراین اشتباهات حذف نشده اند - اگر چیزی بیرون بیاید و یا جایی اشتباه واضح باشد: لطفا یک نقص پیدا کنید درست. متاسفم برای شهرداری روش های شرح داده شده.
تا حالا. امیدوارم مفید باشد
به جای اپیلوگا:
اسرار کسب و کار موفق:
1. هیر او را می داند
2. Sam به نوعی بیرون آمد
برچسب ها :،
Pisano 08/01/2014 
