Open
Close

Masonry не працює. Використовуємо скрипт jQuery Masonry для оформлення постів у стилі Pinterest. Що таке jQuery Mansory

07.12.2023 -
Смартфони

У розділі блог. Ця тема WordPress буде нашим прикладом, але Ви напевно бачили використання jQuery Masonry і на інших сайтах WordPress.

Що таке jQuery Mansory

Masonry можна вважати доповненням до css, за допомогою якого можна розташувати елементи горизонтально, переходячи у вертикальне положення залежно від ширини монітора. В результаті мінімізуються вертикальні проміжки між елементами різної висоти. Якщо Ви захочете зробити теж за допомогою CSS, повірте мені у Вас буде багато головного болю.

На цьому прикладі Ви можете побачити принцип роботи jQuery Masonry до та після використання:

Як Ви бачите результат в наявності, якщо Ви використовувати css float: left, то залишаються порожні проміжки, необхідно використовувати css position, яке досить проблематично налаштувати, можна, А навіщо, в цьому допоможе Masonry.

Використовуємо jQuery Mansory на сайтах WordPress

Masonry можна використовувати у двох випадках. Перший це коли всі ваші блоки з інформацією однакової ширини, в цьому випадку Вам необхідно використовувати даний шматок скрипта:

jQuery(document).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));

$ ("#content_masonry"). masonry ((singleMode: true));

} ) ;

Якщо у Вас є блоки різної ширини, Вам необхідно використовувати наступний код:

jQuery(document).ready(function($)( $("#content_masonry").masonry(( columnWidth: 300 )); ));

jQuery (document). ready (function ($ ) (

$ ("#content_masonry"). masonry ((columnWidth: 300));

} ) ;

Де сolumnWidth це ширина сітки (у пікселях). Masonry дотримуватиметься цих двох правил:

  • Загальна ширина елементів (обчислюється за даною формулою) = CSS width + padding-right + padding-left + border-right-width + border-left-width + margin-right + margin-left
  • При використанні columnWidth всі елементи повинні бути розташовані горизонтально на розрахунок ширини ColumnWidth (наприклад, ColumnWidth: 200, елементи будуть починатися з 0 або 200 або 400 пікселів і так далі). Це може не зовсім зрозуміло, але нічого складного в цьому немає, дивимося картинку.

    • Перший елемент загальною шириною 190px і margin-right: 0. А другий елемент має margin-left: 0, за ідеєю ці два елементи повинні торкатися один одного. Але оскільки ColumnWidth має значення 200px, другий елемент починає відображатися на відстань 200px.

    Цей процес не відбуватиметься, якщо ми не маємо в скрипті значення ColumnWidth і всі елементи починаються один за одним, тому необхідно відокремлювати їх за допомогою margin.

    Отже чудеса jQuery Masonry та WordPress 3.

    Тепер трохи кодуємо. Для початку підключимо необхідні бібліотеки jQuery та Masonry у файлі header.php. Закиньте цей код в header.php (завантажити Ви можете на сайті) :

    //підключаємо jQuery

    Мережі та комунікації
    Онлайн-сервіси