--- title: "WT Masonry.js web asset plugin for Joomla 4 and Joomla 5 - WebTolk websites development, Joomla Extensions" description: "Masonry js web asset plugin for Joomla 4 and Joomla 5 download for free" url: "https://web-tolk.ru/en/dev/joomla-plugins/wt-masonry-js" date: "2026-06-12T11:28:25+00:00" language: "en-GB" --- # WT Masonry.js - **Categories:** [Joomla plugins](https://web-tolk.ru/en/dev/joomla-plugins), [Joomla 4 - Joomla 6extensions](https://web-tolk.ru/en/dev/rasshireniya-dlya-joomla-4), [Web Assets](https://web-tolk.ru/en/dev/web-assets) - **Version:** 4.2.3.1 - **Date:** 26 October 2023 3875 3584 CTR 108% Plg Free [Download](https://web-tolk.ru/en/get?element=wtmasonryjs)[Versions](https://web-tolk.ru/en/dev/joomla-plugins/wt-masonry-js/versions)[Documentation](https://masonry.desandro.com/)[GitHub](https://github.com/desandro/masonry) Masonry script that allows you to output images in the form of brickwork. The script is designed in Joomla 4+ WebAsset, which allows you to use it in any extensions of Joomla 4 and Joomla 5. This is a plugin for Joomla developers. It does not provide ready-to-use code. ![WT Masonry.js](https://web-tolk.ru/images/swjprojects/projects/75/en-GB/icon.webp) ## Description ### What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. ### Enabling an asset in 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 ``` After that, the local or from CDN masonry script will be included in the of the Joomla page. Also, the [imagesLoaded imagesLoaded](https://imagesloaded.desandro.com/)asset has been added to the plugin, which should be used with a large number of images. ### Code example An example from the official documentation of the script #### HTML ```
...
...
...
...
``` #### CSS All sizing of items is handled by your CSS. ``` .grid-item { width: 200px; } .grid-item--width2 { width: 400px; } ``` #### Initialize with jQuery ``` $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 }); ``` #### Initialize with Vanilla JavaScript ``` 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 }); ``` ### Connecting imagesLoaded This script initializes masonry again after loading the next image. This creates a dynamic addition of images to the brickwork. #### Initialize with jQuery ``` // init Masonry var $grid = $('.grid').masonry({ // options... }); // layout Masonry after each image loads $grid.imagesLoaded().progress( function() { $grid.masonry('layout'); }); ``` #### Initialize with Vanilla JavaScript ``` 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 **Extension type:** Plugin **Folder:** System **Joomla version:** 4.3.4, 5.0.0 ## What's new 2023-10-26 21:03:33 Fixed ### Bug fixes Bug fixes in the plugin code Addition ### Joomla 5 ready Successfully tested working with 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/en", "name": "Home" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://web-tolk.ru/en/dev", "name": "Joomla extensions" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "/en/dev/joomla-plugins", "name": "Joomla plugins" } }, { "@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 websites development, Joomla Extensions", "publisher": { "@id": "https://web-tolk.ru/#/schema/Organization/base" } }, { "@type": "WebPage", "@id": "https://web-tolk.ru/#/schema/WebPage/base", "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-masonry-js", "name": "WT Masonry.js web asset plugin for Joomla 4 and Joomla 5 - WebTolk websites development, Joomla Extensions", "description": "Masonry js web asset plugin for Joomla 4 and Joomla 5 download for free", "isPartOf": { "@id": "https://web-tolk.ru/#/schema/WebSite/base" }, "about": { "@id": "https://web-tolk.ru/#/schema/SoftwareApplication/base" }, "inLanguage": "en-GB", "breadcrumb": { "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17" } }, { "@type": "SoftwareApplication", "name": "WT Masonry.js ", "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-masonry-js", "description": "Masonry script that allows you to output images in the form of brickwork. The script is designed in Joomla 4+ WebAsset, which allows you to use it in any extensions of Joomla 4 and Joomla 5. This is a plugin for Joomla developers. It does not provide ready-to-use code.", "applicationCategory": "Joomla plugins", "softwareVersion": "4.2.3.1", "downloadUrl": "https://web-tolk.ru/en/get?element=wtmasonryjs", "image": "https://web-tolk.ru/images/swjprojects/projects/75/en-GB/icon.webp", "operatingSystem": "ANY", "interactionStatistic": [ { "@type": "InteractionCounter", "interactionType": "https://schema.org/DownloadAction", "userInteractionCount": 3875 }, { "@type": "InteractionCounter", "interactionType": "https://schema.org/ViewAction", "userInteractionCount": 3585 } ], "mainEntityOfPage": { "@type": "WebPage", "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-masonry-js" }, "softwareRequirements": "Joomla", "applicationSubCategory": "Joomla plugins, Joomla 4 - Joomla 6extensions, Web Assets", "isAccessibleForFree": true } ] } ```