--- title: "WT Masonry.js плагин веб ассета для Joomla 4 и Joomla 5 - WebTolk" description: "Плагин веб ассет masonry js для Joomla 4 и Joomla 5 скачать бесплатно" url: "https://web-tolk.ru/dev/joomla-plugins/wt-masonry-js" date: "2026-06-02T21:35:19+00:00" language: "ru-RU" --- # WT Masonry.js - **Категории:** [Плагины Joomla](https://web-tolk.ru/dev/joomla-plugins), [Расширения для Joomla 4 - Joomla 6](https://web-tolk.ru/dev/rasshireniya-dlya-joomla-4), [Веб-ассеты](https://web-tolk.ru/dev/web-assets) - **Версия:** 4.2.3.1 - **Дата:** 26 октября 2023 3821 3544 CTR 108% Plg Free [Скачать](https://web-tolk.ru/get?element=wtmasonryjs)[Версии](https://web-tolk.ru/dev/joomla-plugins/wt-masonry-js/versions)[Документация](https://masonry.desandro.com/)[GitHub](https://github.com/desandro/masonry) Скрипт masonry, позволяющий выводить изображения в виде кирпичной кладки. Скрипт оформлен в Joomla 4+ Web Asset, что позволяет использовать его в любых расширениях Joomla 4 и Joomla 5. Это плагин для Joomla-разработчиков. Он не предоставляет готовый к использованию код. ![WT Masonry.js](https://web-tolk.ru/images/swjprojects/projects/75/ru-RU/icon.webp) ## Описание ### Подключение ассета в Joomla ``` getDocument()->getWebAssetManager(); $wa->useScript('wtmasonryjs.local'); // local file $wa->useScript('wtmasonryjs.remote'); // from CDN $wa->useScript('imagesloaded.local'); // imagesLoaded.js from local file $wa->useScript('imagesloaded.remote'); // imagesLoaded.js from CDN ``` После этого в страницы Joomla будет включен локальный или из CDN скрипт masonry. Также в плагине добавлен ассет [imagesLoaded](https://imagesloaded.desandro.com/), который нужно использовать при большом количестве картинок. ### Пример кода Пример из официальной документации скрипта #### HTML ```
...
...
...
...
``` #### CSS Все размеры элементов сетки masonry в Joomla задаются через Ваш CSS код ``` .grid-item { width: 200px; } .grid-item--width2 { width: 400px; } ``` #### Инициализация скрипта с помощью jQuery ``` $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 }); ``` #### Инициализация скрипта без jQuery ``` var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { // options itemSelector: '.grid-item', columnWidth: 200 }); // element argument can be a selector string // for an individual element var msnry = new Masonry( '.grid', { // options }); ``` ### Подключение imagesLoaded Этот скрипт инициализирует masonry ещё раз после загрузки очередной картинки. Таким образом создаётся динамическое добавление изображений в кирпичную кладку. #### Инициализация с jQuery ``` // init Masonry var $grid = $('.grid').masonry({ // options... }); // layout Masonry after each image loads $grid.imagesLoaded().progress( function() { $grid.masonry('layout'); }); ``` #### Инициализация без jQuery ``` document.addEventListener('DOMContentLoaded',() => { const masonryGrid = document.getElementById('masonry-test'); var msnry = new Masonry(masonryGrid, { itemSelector: '.grid-item', columnWidth: 200, percentPosition: true }); imagesLoaded( masonryGrid ).on( 'progress', function() { // layout Masonry after each image loads msnry.layout(); }); }); ``` ## Joomla **Тип расширения:** Плагин **Каталог:** System **Версия Joomla:** 4.3.4, 5.0.0 ## Что нового 26.10.2023, 21:03:33 Исправлено ### Исправления кода Исправления ошибок в коде плагина Добавлено ### Joomla 5 ready Успешно проверена работа плагина на Joomla 5 ## JSON-LD Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://web-tolk.ru/", "name": "Главная" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://web-tolk.ru/dev", "name": "Расширения Joomla" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "/dev/joomla-plugins", "name": "Плагины Joomla" } }, { "@type": "ListItem", "position": 4, "item": { "name": "WT Masonry.js " } } ] } ``` ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://web-tolk.ru/#/schema/Organization/base", "name": "WebTolk", "url": "https://web-tolk.ru/", "logo": { "@type": "ImageObject", "@id": "https://web-tolk.ru/#/schema/ImageObject/logo", "url": "images/webtolk-1080p.jpg", "contentUrl": "images/webtolk-1080p.jpg", "width": 1920, "height": 1080 }, "image": { "@id": "https://web-tolk.ru/#/schema/ImageObject/logo" }, "sameAs": [ "https://github.com/WebTolk", "https://github.com/sergeytolkachyov", "https://vk.com/web_tolk", "https://vk.com/webtolkru", "https://tenchat.ru/sergeytolkachyov", "https://t.me/sergeytolkachyov", "https://t.me/webtolkru" ] }, { "@type": "WebSite", "@id": "https://web-tolk.ru/#/schema/WebSite/base", "url": "https://web-tolk.ru/", "name": "WebTolk", "publisher": { "@id": "https://web-tolk.ru/#/schema/Organization/base" } }, { "@type": "WebPage", "@id": "https://web-tolk.ru/#/schema/WebPage/base", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-masonry-js", "name": "WT Masonry.js плагин веб ассета для Joomla 4 и Joomla 5 - WebTolk", "description": "Плагин веб ассет masonry js для Joomla 4 и Joomla 5 скачать бесплатно", "isPartOf": { "@id": "https://web-tolk.ru/#/schema/WebSite/base" }, "about": { "@id": "https://web-tolk.ru/#/schema/SoftwareApplication/base" }, "inLanguage": "ru-RU", "breadcrumb": { "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17" } }, { "@type": "SoftwareApplication", "name": "WT Masonry.js ", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-masonry-js", "description": "Скрипт masonry, позволяющий выводить изображения в виде кирпичной кладки. Скрипт оформлен в Joomla 4+ Web Asset, что позволяет использовать его в любых расширениях Joomla 4 и Joomla 5. Это плагин для Joomla-разработчиков. Он не предоставляет готовый к использованию код. ", "applicationCategory": "Плагины Joomla", "softwareVersion": "4.2.3.1", "downloadUrl": "https://web-tolk.ru/get?element=wtmasonryjs", "image": "https://web-tolk.ru/images/swjprojects/projects/75/ru-RU/icon.webp", "operatingSystem": "ANY", "interactionStatistic": [ { "@type": "InteractionCounter", "interactionType": "https://schema.org/DownloadAction", "userInteractionCount": 3821 }, { "@type": "InteractionCounter", "interactionType": "https://schema.org/ViewAction", "userInteractionCount": 3545 } ], "mainEntityOfPage": { "@type": "WebPage", "url": "https://web-tolk.ru/dev/joomla-plugins/wt-masonry-js" }, "softwareRequirements": "Joomla", "applicationSubCategory": "Плагины Joomla, Расширения для Joomla 4 - Joomla 6, Веб-ассеты", "isAccessibleForFree": true } ] } ```