אנשי קשר

בנייה - בלוקים בצורת לבנים באמצעות css טהור. פריסת בנייה למיטוב החלל לאפשרות זו יש הרבה חסרונות

  • 07.10.2023

שלום לכולם! היום אני רוצה לדבר על איך אתה יכול לעשות בלוקים בצורה של לבנים(בַּנָאוּתמאנגלית - לבנים), כלומר, בלוקים בגבהים שונים ימוקמו יפה זה מתחת לזה ללא חללים ריקים גדולים. כן! כל זה יכול להיעשות בקלות רבה באמצעות css.

יש מאפיין ב-css איתו ניתן ליצור טקסט מרובה עמודות או בלוקים. אנחנו נשתמש בו.

כך נקרא הנכס עמודות.זהו מאפיין אוניברסלי המאפשר לך להגדיר מיד את רוחב ומספר העמודות. אתה יכול לקרוא עוד על זה בספר עיון טוב ב-CSS.

אז בעצם זה מאוד פשוט. לדוגמה, יש לנו 6 אלמנטים בגבהים שונים, אך באותו רוחב. דוגמה בולטת היא סרגל הצד (עמודה צדדית) באתרי אינטרנט. כאן כל הבלוקים הם באותו רוחב, אבל גבהים שונים. בדרך כלל, בגרסת המובייל של האתר, הסרגל הצידי ממוקם אחרי התוכן הראשי, בתחתית האתר, והתוכן עצמו עשוי למלא את כל רוחב המסך. מטבע הדברים, זה גם לא הגיוני למקם סרגל צד בעמודה אחת, שכן יהיה הרבה מקום פנוי בצדדים, במיוחד במבט מטאבלט.

אבל, אם הבלוקים מקבלים את הנכס תצוגה: בלוק מוטבע, אז הם באופן אוטומטי, אם רוחב המיכל מספיק, יהיו מסודרים בכמה עמודות. עם זאת, ייתכן שהדברים לא נראים יפים במיוחד:

מסכים, החריצים האלה בין הבלוקים לא נראים טוב בכלל. לכן, יש צורך לתקן זאת בדחיפות! לזה לגוש המכולה,בהם ממוקמים הבלוקים, עליך להוסיף את הסגנונות הדרושים:

עמודות Moz: 300px אוטומטי; -webkit-columns: 300px אוטומטי; עמודות: 300px אוטומטי;

עבור תאימות בין דפדפנים, אנו משתמשים במאפיינים עבור דפדפני Firefox ו-Webkit (Chrome, Safari, Android). לדוגמה, נסדר את הבלוקים באמצעות רשימת תבליטים, ואז הסגנונות של הדוגמה בתמונה ייראו כך:

Ul ( width: 1050px; -moz-columns: 300px auto; -webkit-columns: 300px auto; עמודות: 300px auto; ) li (תצוגה: inline-block; box-shadow: 0 0 8px #555; סגנון רשימה: אין; ריפוד: 10px; רוחב: 300px; שוליים-תחתית: 30px; יישור אנכי: למעלה; )

במקרה זה, הבלוקים יהיו מסודרים במספר עמודות מִינִימוּםברוחב 300px, ומספר העמודות ייקבע אוטומטית על ידי הדפדפן. זה שימושי ליצירת הסתגלות. במקרה זה יהיו 3 עמודות, וכך זה ייראה:

תצטרך לבחור את רוחב המיכל (1050px) אם תרצה שהמרחק האנכי בין הבלוקים יתאים למרחק האופקי. אחרת, הרוחב בין העמודות יוגדר אוטומטית על ידי הדפדפן. יש נכס פער-עמודים, המציין את המרחק בין העמודות. אבל במקרה הזה זה לא יעבוד כמו שאתה רוצה.

ישנה אפשרות נוספת: עבור בלוקים אתה צריך להגדיר את המאפיין width:100%. כמו כן, אם מאפיין ה-padding מוגדר, כמו במקרה שלי, אז אתה צריך להגדיר את ה-box-sizing: border-box מאפיין. עכשיו אתה יכול להוסיף בבטחה את המאפיין column-gap למיכל כדי להגדיר את המרחק בין העמודות. ככה זה יעבוד כמו שצריך.

מסכים, זה נראה הרבה יותר טוב ככה! אתה יכול גם למקם קוביות "div" בתוך מיכל "div". לחלופין, אם אתה צריך להפיץ את הטקסט למספר עמודות, פשוט הוסף את הטקסט הנדרש לתג "p" עם, למשל, המחלקה "text" והגדר את המאפיין עבור המחלקה הזו עמודות.

זה הכל! אז פשוט, ללא סקריפטים מיותרים, אתה יכול לסדר בלוקים בצורה של לבנים או טקסט בכמה עמודות. אבל זכור כי במקרה זה זה ייראה יפה רק אם הבלוקים הם באותו רוחב. אחרת, כל מה שנותר הוא להשתמש בכתב בנייה טוב. התסריט ממקם באופן אוטומטי כל בלוק. אבל זה נושא אחר…

זה הכל! אם יש לך שאלות או הערות, השאר אותן בתגובות. בהצלחה!

תוסף Simple Masonry Layout. עם קוד קצר פשוט, אתה יכול להוסיף פריסת בנייה לפוסטים, סוגי פוסטים מותאמים אישית. ואפילו גלריית פריסת בנייה לפוסטים וסוג פוסט מותאם אישית. קל מאוד לשימוש עם קודים קצרים מאוד פשוטים. תצוגת רשת טובה יותר של פוסטים, סוגי פוסטים מותאמים אישית.

תוסף זה ישנה את הבלוגים שלך למראה מתקדם יותר של פריסת בנייה (רשת) עם שימוש בקודים פשוטים זמינים.

  • בלוג פריסת בנייה.
  • בלוג פריסת בנייה מקטגוריה ספציפית.
  • פריסת בנייה סוג פוסט מותאם אישית.
  • גלריית פריסת בנייה לפוסטים
  • פריסת בנייה עם גלריה רספונסיבית פשוטה.
  • ניתן להשתמש בקוד קצר פשוט עבור פריסת בנייה.
  • ניתן להשתמש בקוד קצר בעורך או בקובצי תבניות.

שאלות נפוצות

האם תוסף תואם לכל ערכת נושא?

כן, תוסף זה תואם 100% לכל נושא חינמי, מותאם אישית ותשלום. אתה יכול אפילו להשתמש בתוסף זה כדי לשנות את ערכת הנושא של וורדפרס המוגדרת כברירת מחדל לנושא פריסת בנייה (רשת) בעל מראה טוב יותר עם קודים קצרים זמינים פשוטים.

האם פריסת בנייה מגיבה?

כן, פריסת בנייה רספונסיבית. יש לו גם חלון קופץ Jquery Responsive.

יומן שינויים

1.3.2

  • קישור cdn נוסף ל-font-awesome

1.3.1

  • תיקון קטן בתסריט ובסגנון התור

1.3

  • תיקון מינורי על עימוד
  • נוספה הגדרה להפעלה או השבתה של Jquery Popup
  • נוסף קישור לתמונה מוצגת לפוסט קבוע
  • התנגשות גרסת jQuery נפתרה
  • החלפת ברירת המחדל של wordpress בגרסת jQuery עם 1.8.2

1.2

  • נוסף קוד קצר עבור בלוג פריסת בנייה מקטגוריה ספציפית
  • נוסף עימוד
  • נוסף לאפשר ריבוי שפות
  • נוסף פופאפ Jquery רספונסיבי פשוט
  • נוסף קישור לכתובת הפוסט לגלריה
  • נוספה הגדרת כתובת האתר של כותרת הפוסט

    • הפעלת הסקריפט בנייה של jQueryהכלולה בספריות הליבה של וורדפרס 3.5 מאפשרת לך לשנות בקלות את הגישה להצגת פוסטים בעמוד הראשי של האתר שלך. סקריפט זה מאפשר להציג את כל הפוסטים והתמונות בצורה של "קיר לבנים" אחד, ללא קשר לאורך הפוסט וגודל התמונות, מה שהופך את האתר לאטרקטיבי יותר מבחינה ויזואלית לקוראים וגם מזכיר את המראה החיצוני. של שירות פופולרי כרגע פינטרסט. באמצעות jQuery Masonry, כל הפוסטים "מתכוננים" זה לזה וממלאים את כל החלל שהוקצה להם ללא "פערים" או "רווחים ריקים" בעמוד הראשי. בואו להבין איך להגדיר את המראה הזה עבור האתר שלך.

    מהו פלט בפורמט לבנים?

    הצגת תוכן בעמוד עם הגדרות תצוגת פוסטים אלו דומה, כפי שכבר אמרנו, לעמוד הראשי פינטרסט. כל הפוסטים מסודרים בצורה אנכית וממלאים את כל החלל המוקצה לפיד. אתה יכול גם להשתמש ב-CSS צף, אבל במקרה זה אתה מסתכן בהיתקלות ב"כתמים לבנים" בעמוד, שכן התוכן מסודר תחילה אופקית ורק לאחר מכן אנכית. במקרה של jQuery Masonry, ניתן לפתור בקלות את הבעיה של "נקודות ריקות".

    דוגמה צפה ב-CSS

    דוגמה של jQuery Masonry ("מבנה לבנה")

    במקרה של jQuery Masonry, כל פוסט מתאים באופן מושלם למבנה הכללי, ואין "כתמים לבנים".

    בואו ניצור תצוגה די פשוטה של ​​הפוסטים שלכם בהתבסס על סקריפט של jQuery Masonry, מכיוון שאנו כבר יודעים מהו "מבנה הלבנים" להצגת פוסטים בעמוד הראשי וכיצד זה עובד.

    שלב 1: השתמש ב-wp_enqueue_script כדי לטעון את הספרייה

    לפני תחילת העבודה, עליך להוריד סקריפט המתאים למשימה זו. לשם כך, הוסף את הקוד הבא לקובץ בשם functions.php:

    פונקציה mason_script() ( wp_enqueue_script("jquery-masonry"); ) add_action("wp_enqueue_scripts", "mason_script");

    שלב 2: הגדרת הרשת

    לפריסה הראשית של המבנה שלנו, הוסף את הקוד הבא HTMLלתוך הלולאה (או לתוך החלק של התבנית שבו אנחנו מתכננים להשתמש ב"קיר הלבנים" שלנו). ראשית, בואו נגדיר מאגר משותף לכל הפוסטים הללו, ולאחר מכן נפעיל סוג זה של תצוגה עבור כל פוסט בנפרד:

    התאמה אישית של CSS

    אנחנו צריכים גם לציין את רוחב גוש המיכל ואת רוחב הפוסט הבודד כדי לשמור על המראה ה"דמוי פינטרסט" שאנו רוצים. בדוגמה שלנו, הגדרנו את רוחב הפס ל 960 פיקסלים, ואנחנו מקבלים 4 עמודותפוסטים עם רוחב של 240 פיקסליםעבור כל פוסט. אנו זוכרים את הפרמטרים האלה ומגדירים את הפלט בגיליון הסגנונות:

    #container ( רוחב: 960px; // רוחב המיכל כולו עבור הקיר ) .brick ( רוחב: 220px; // רוחב של כל לבנה פחות הריפוד שבין הריפוד: 0px 10px 15px 10px; )

    שלב 3. הגדר את הפונקציה

    JQuery(document).ready(function($) ( $("#container").masonry(( columnWidth: 220)); ));

    סיכום

    בנייה מגיעה עם אפשרויות מובנות רבות לשימוש בסקריפט זה בתוך וורדפרס. לדוגמה, אתה יכול להחיל אפקטי אנימציה כדי "להחיות" את הפוסטים שלך, להוסיף הגדרות נוספות "לקיר" ולסדר את פלט התוכן בסדר מסוים, או להשתמש בסקריפט זה יחד עם Infinity Scroll . לא משנה איך אתה משתמש בסקריפט jQuery Masonry, זה נהדר שהוא התווסף לוורדפרס 3.5.

    נתקלתם באתרים שבהם בלוקים בגדלים שונים מוצגים במיכל, הממלאים את החלל בצורה יעילה ככל האפשר?

    תסריט DeSandro של דייוויד, שנקרא בַּנָאוּת(מתוך לבנים באנגלית). אתה יכול גם לראות דוגמה ברורה באתר הרשמי של התסריט. דולק כבוי. באתר תמצאו תיעוד מלא באנגלית.

    Masonry היא ספריית Javascript המאפשרת לך להציג בלוקי HTML בצורה קומפקטית ומקופלת. התסריט מנתח את הגובה של כל בלוק ומציב אותו חוסך מקום ככל האפשר.

    אולי מישהו שמע על זה הרבה זמן ואפילו השתמש בו בפרויקטים שלו, אבל נתקלתי בו בפעם הראשונה לאחרונה. אני לא יכול לומר שכל אחד יכול בקלות להסיק מסקנה כלשהי. אבל אני חושב שכל אחד יכול להתמודד עם שימוש בסיסי. לא כל כך קל להבין מה ואיך זה עובד שם, אבל אני גם לא יכול להגיד שזה מאוד קשה. אם אתה בקיא ב-JS, אז כל פלט אמור לעבוד. מטרת הפוסט הזה היא להציג בפניכם את בנייה ולהשאיר הערה לגביו לעצמכם.

    בַּנָאוּתעובד באופן עצמאי ללא שימוש בספריות, אך יכול לשמש גם כ jQueryחיבור

    בפוסט הזה אתרגם את העמוד הראשי של ה-off-site, שמסביר איך להתחיל לעבוד עם הסקריפט.

    בנייה ב-Javascript

    חיבור בנייה

    חבילות התקנה אלה מכילות את כל מה שאתה צריך כדי להשתמש ב-Masonry:

    • function mason_script() ( // wp_register_script("masonry", "/path/to/masonry.pkgd.min.js"); // אין צורך בשורה העליונה כי וורדפרס מגיעה עם בנייה כברירת מחדל, אז אתה יכול פשוט להתחבר it. wp_enqueue_script("masonry"); ) add_action("wp_enqueue_scripts", "mason_script");

      HTML

      בנייה עובדת עם רכיבי מיכל בעלי אותה מחלקת פריט:

      ...
      ...
      ...
      ...

      אתה יכול לציין כל מחלקה, העיקר לציין את אפשרות itemSelector כשקוראים: ".item" .

      CSS

      עבור בלוקים של מיכל, אתה צריך לציין את הרוחב. יש לבחור את הרוחב בהתאם למיכל ולפרמטר columnWidth (רוחב עמודה):

      פריט ( רוחב: 25%; ) .item.w2 ( רוחב: 50%; )

      הפעלת בנייה (אתחול)

      כדי שהסקריפט יתחיל לעבוד, יש להחיל אותו על המיכל שלנו. הפעלת הסקריפט כמופע ב-javascript טהור עושה זאת:

      Var container = document.querySelector("#container"); var msnry = new Masonry(container, ( // Settings columnWidth: 200, itemSelector: ".item" ));

      במקרה זה, בנאי המופע מכיל 2 ארגומנטים: columnWidth (רוחב העמודה) ו-itemSelector (מחלקת הבלוקים במיכל שאיתו תעבוד בנייה). אלו לא כל האפשרויות, ראה את השאר בתיעוד או למטה בעמוד זה.

      אתחול באמצעות HTML

      ניתן להפעיל בנייה ללא שימוש ב-Javascript, ישירות מ-HTML, על ידי ציון המחלקה js_masonry למיכל וציון האפשרויות בתכונת data-masonry-options:

      האפשרויות המוגדרות ב-HTML חייבות להיות בפורמט JSON. הטיעונים חייבים להיות במרכאות "itemSelector": . שים לב שערך תכונת HTML חייב להיות במירכאות בודדות "מכיוון שמאפייני JSON משתמשים במירכאות כפולות".

      אתחול באמצעות jQuery

      אתה לא צריך jQuery כדי להשתמש ב-Masonry, אבל אם יותר נוח לך לעבוד עם jQuery, בנייה עובדת איתו בתור תוסף.

      Var $container = $("#container"); // אתחול $container.masonry(( columnWidth: 200, itemSelector: ".item" ));

      כדי לקבל את המופע השתמש בשיטת ‎.data("masonry"):

      Var msnry = $container.data("masonry");

      אתחול עבור בלוקי תמונה

      מכיוון שתמונות נטענות בנפרד מקוד ה-HTML, השימוש ב"בנייה" עבור בלוקים עם תמונה גורם בדרך כלל לשגיאה - בלוק אחד חופף לאחר. זה קורה כי בנייה יורה לפני שהדימוי בבלוק נטען, גובה הבלוק נקבע, ואז התמונה "הורסת" את הגובה הזה. ישנן מספר דרכים לפתור בעיה זו:

      שיטה 1

      הגדר מידות נוקשות לכל התמונות: רוחב וגובה בפיקסלים.

      שיטה 2

      תליית עיבוד בנייה באירוע הטעינה. קוד jQuery:

      JQuery(window).load(function())( jQuery(".masonry").masonry(( columnWidth:310, itemSelector:".box, .item" )); ));

      החיסרון של שיטה זו הוא שככל הנראה תצטרכו לחכות לטעינת ה"חלון" כולו: jQuery(window).load . שימוש בעומס על אלמנט בלבד הוא לעתים רחוקות מקובל מכיוון ש-jQuery יפרש אותו כפונקציית עומס של AJAX. כדי להימנע מכך, השתמש בדוגמה השלישית.

      שיטה 3

      אתחול העבודה של בנייה לאחר שכל התמונות נטענו. וכדי לבדוק את הטעינה, השתמש בסקריפט JS הנוסף imagesLoaded . קוד:

      Var container = document.querySelector("#container"); var msnry; // אתחול בנייה, לאחר טעינת תמונות imagesLoaded(container, function() ( msnry = new Masonry(container); ));

      קוד jQuery:

      Var $container = $("#container"); // אתחול בנייה, לאחר טעינת תמונות $container.imagesLoaded(function() ( $container.masonry(); ));

      הערה: עלולה להתרחש שגיאה גם בעת שימוש בגופנים נוספים, לכן עליך לבדוק את טעינת הגופנים.

      נכסים

      המאפיינים הנדרשים הם: columnWidth ו-itemSelector . ניתן להשתמש בכל השאר כרצונך:

      ItemSelector (מחרוזת) (חובה)קובע באיזה אלמנט ילד של המיכל ישמש בעת בניית הבנייה. יש לציין את האלמנט כדי לא לכלול רכיבי מיכל אחרים המשמשים להגדרת גדלים, ראה "columnWidth": ".grid-sizer" .
      ברירת מחדל: לארוחב עמודה (מספר/אלמנט/בורר כמחרוזת) (חובה)רוחב עמודה בפיקסלים: "columnWidth": 60 . אם תגדיר בורר או אלמנט, בנייה תשתמש ברוחב של אלמנט הסט: "columnWidth": ".gutter-sizer". בנייה מחשבת את הרוחב החיצוני של הבלוקים תוך התחשבות בגבול המאפיינים של css, ריפוד, שוליים.
      ברירת מחדל: לאסגנון מיכל (חפץ)סגנונות CSS המוחלים על המכולה. כדי לבטל את היישום של סגנונות בנייה על מיכל, ציין containerStyle: null
      ברירת מחדל: (מיקום: "קרוב")מַרזֵב (מספר/אלמנט/בורר כמחרוזת)רווח בין אלמנטים, בדומה לשוליים-ימין. דוגמה: "מרזב": 10
      ברירת מחדל: 0 hiddenStyle (חפץ)סגנונות שהוחלו על אלמנטים מוסתרים.
      ברירת מחדל: (אטימות: 0, טרנספורמציה: "scale(0.001)" ) isFitWidth (הגיוני)מגדיר את רוחב המכולה למספר העמודות הזמין, המחושב מרוחב רכיבי המכולה. לאחר ההגדרה, תוכל לרכז את המיכל באמצעות CSS. הפתק:מאפיין זה אינו פועל אם הרוחב של רכיבי המאגר מוגדר ל-%, הוא צריך להיות בפיקסלים: width: 120px . כמו כן, אפשרות רוחב עמודהצריך להיות מוגדר לערך קבוע, לדוגמה: columnWidth: 120 .
      ברירת מחדל: שקר isInitLayout (הגיוני)מאפשר כוונון בלוק במהלך האתחול. הגדר ל-false כדי למנוע מהסקריפט לבנות לבנה בעת האתחול, כך שתוכל להשתמש בשיטות ולהוסיף אירועים לפני עיבוד רכיבי מיכל.
      ברירת מחדל: נכון isOriginLeft (הגיוני)שולט בסידור האופקי של בלוקים. כברירת מחדל, בלוקים מסודרים משמאל לימין. הגדר ל-false כדי לסדר בלוקים מימין לשמאל.
      ברירת מחדל: נכון isOriginTop (הגיוני)שולט בסידור האנכי של בלוקים. כברירת מחדל, בלוקים מסודרים מלמעלה למטה. הגדר ל-false כך שהבלוקים מסודרים מלמטה למעלה.
      ברירת מחדל: נכון isResizeBound (הגיוני)מקשר את מיקום הבלוקים לשינויים בגודל החלון.
      ברירת מחדל: נכוןחותמת (אלמנט/מערך אלמנטים/בורר מחרוזות/NodeList)קובע אילו בלוקים צריכים להיות מחויבים במהלך הפלט. אלו אלמנטים מיוחדים שעליהם לא יוחל אפקט הבנייה. "stamp": ".stamp"
      ברירת מחדל: לאמשך המעבר (קַו)משך המעבר (מהירות האנימציה) כאשר בלוקים משנים מיקום או מופיעים. צריך להגדיר בפורמט זמן עבור CSS. כדי לבטל את כל האנימציות שהוגדרו ל-0: transitionDuration: 0
      ברירת מחדל: "0.4 שניות" visibleStyle (חפץ)סגנונות שיושמו בעת הצגת אלמנטים מוסתרים.
      ברירת מחדל: (אטימות: 1, טרנספורמציה: "scale(1)" )

      בנייה ב-CSS טהור

      לאחרונה, כמעט כל הדפדפנים מבינים את מאפיין ספירת העמודות של CSS.

      ואם כן, אז כבר אין צורך לחבר javascript וניתן לעשות בלוקים של Masonry באמצעות css טהור. כמובן שאופציה זו פחות גמישה בהגדרות, אך היא הרבה יותר פשוטה ומהירה להתקנה וקלה יותר להבנה.

      הנקודה היא זו.

      יש לנו קוד HTML זה:

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      ...
      ...
      ...

      ואנחנו מחברים את סגנונות ה-CSS הבאים עבורו:

      /* מיכל של גושי בנייה */ .masonry (ספירת עמודות: 4; // כמה עמודות נדרשות? עמודות-פער: 1em; // פער בין בלוקים (ימין או שמאל) /* זהה עם הקידומות הדרושות כמו של 18 במרץ, 2016 * / -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column -gap: 1em; ) /* בלוקי בנייה */ .masonry .item (תצוגה: inline-block; // important! width: 100%; // important! margin-bottom: 1em; רקע-צבע: #eee; )

      לאפשרות זו יש הרבה חסרונות

      בואו נעבור על החסרונות של שיטה זו וכיצד היא נחותה מבנייה.

        תמיכת הדפדפן מצוינת היום (2016), אך עדיין לא מלאה...

        כל אנימציה תצטרך להסתיים באופן ידני.

        החיסרון העיקרי של ספירת עמודים ולמעשה הסיבה לכך שלא ניתן להשתמש בשיטה זו במקום בנייה ברוב המקרים הוא כיוון הבלוקים.

        אם בנייה נראת אופקית:
        1 2 3
        4 5 6

        ואז בספירת עמודות אנכית:
        1 3 5
        2 4 6

        שימוש בגישה זו מנקודת מבט כרונולוגית אינו אופציה.


      מאמרים בנושא

    כתבות אחרונות
    מאמרים פופולריים
    בחירת העורכים
    sued.ru