{"id":19253103,"url":"https://github.com/mathiew82/masonry-layout-vanilla","last_synced_at":"2026-01-31T19:01:52.140Z","repository":{"id":98691862,"uuid":"194345231","full_name":"Mathiew82/masonry-layout-vanilla","owner":"Mathiew82","description":"Simple masonry developed in Vanilla JS.","archived":false,"fork":false,"pushed_at":"2019-07-08T23:35:06.000Z","size":835,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-10T12:09:01.381Z","etag":null,"topics":["masonry","masonry-grid","masonry-js","masonry-layout","masonry-layout-vanilla"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mathiew82.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-28T23:49:55.000Z","updated_at":"2025-04-26T02:00:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"0fbd0b2c-66bb-4d3a-bc7d-39ec149fc034","html_url":"https://github.com/Mathiew82/masonry-layout-vanilla","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mathiew82/masonry-layout-vanilla","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mathiew82%2Fmasonry-layout-vanilla","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mathiew82%2Fmasonry-layout-vanilla/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mathiew82%2Fmasonry-layout-vanilla/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mathiew82%2Fmasonry-layout-vanilla/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mathiew82","download_url":"https://codeload.github.com/Mathiew82/masonry-layout-vanilla/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mathiew82%2Fmasonry-layout-vanilla/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28950279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T18:30:42.805Z","status":"ssl_error","status_checked_at":"2026-01-31T18:30:19.593Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["masonry","masonry-grid","masonry-js","masonry-layout","masonry-layout-vanilla"],"created_at":"2024-11-09T18:29:30.779Z","updated_at":"2026-01-31T19:01:52.122Z","avatar_url":"https://github.com/Mathiew82.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# masonry-layout-vanilla\n\n![](images/logo-min.png)\n\nSimple masonry developed in javascript vanilla.\n\n**[+ Demo online +](https://codepen.io/Mathiew82/pen/qzoKOK)**\n\n\u0026nbsp;\n### Enable it in your project:\n\nYou only need to download the files:\n\n[masonry-layout-vanilla.js](https://github.com/Mathiew82/masonry-layout-vanilla/blob/master/src/masonry-layout-vanilla.js) *unminify js*\n\u0026nbsp;\nor\n\u0026nbsp;\n[masonry-layout-vanilla.min.js](https://github.com/Mathiew82/masonry-layout-vanilla/blob/master/src/masonry-layout-vanilla.min.js) *minify js*\n\nand\n\n[masonry-layout-vanilla.min.css](https://github.com/Mathiew82/masonry-layout-vanilla/blob/master/css/masonry-layout-vanilla.min.css) *minify css*\n\nInclude files in your project and follow the next steps.\n\n**Note:** In the project's index.html you have available 2 demos and a test, which will serve as a guide to use the masonry.\n\n#### CSS:\n\nCopy-paste the stylesheet \u003c link \u003e into your \u003c head \u003e before all other stylesheets to load our CSS.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/masonry-layout-vanilla.min.css\" /\u003e\n```\n\n#### JavaScript:\n\nPlace the following \u003c script \u003es near the end of your pages, right before the closing \u003c/body\u003e tag.\n\n```html\n  \u003c!-- Include masonry-layout-vanilla.min.js file --\u003e\n  \u003cscript src=\"js/masonry-layout-vanilla.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- Include your js file --\u003e\n  \u003cscript src=\"js/YOUR_JS_FILE.js\"\u003e\u003c/script\u003e\n\n\u003c/body\u003e\n```\n\n#### HTML:\n\nThis is the necessary html structure.\n\n```html\n\u003cdiv class=\"wrapper-masonry\"\u003e\n  \u003cdiv id=\"masonry\"\u003e\n    \u003c!-- Include a div or image here --\u003e\n    \u003c!-- Example --\u003e\n    \u003cimg src=\"images/photo-1.jpeg\" class=\"image\" /\u003e\n    \u003cimg src=\"images/photo-2.jpeg\" class=\"image\" /\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThere must be a parent div *(example: **#wrapper-masonry)***, a container *(example: **#masonry**)*, and the items *(example: **.image**)*. The container must have an id, the items a class.\n\nTo use more than one on the same page, you should only use different names for the selectors:\n\n```html\n\u003cdiv class=\"wrapper-masonry\"\u003e\n  \u003cdiv id=\"masonry\"\u003e\n    \u003cimg src=\"images/photo-1.jpeg\" class=\"image\" /\u003e\n    \u003cimg src=\"images/photo-2.jpeg\" class=\"image\" /\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"wrapper-masonry\"\u003e\n  \u003cdiv id=\"masonry-2\"\u003e\n    \u003cdiv class=\"card\"\u003e...\u003c/div\u003e\n    \u003cdiv class=\"card\"\u003e...\u003c/div\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThen in your script, when calling the method:\n\n```js\n// This would be the masonry of images\nfecthMasonry('masonry', 'image', 4);\n// This would be the masonry of cards\nfecthMasonry('masonry-2', 'card', 3);\n```\n\n\u0026nbsp;\n## Documentation\n\n| Parameter             | Type         | Description                              |\n|:----------------------|:-------------|:-----------------------------------------|\n| First parameter       | String       | The id of the container of items         |\n| Second parameter      | String       | The class of the items                   |\n| Third parameter       | Number       | Number of columns                        |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiew82%2Fmasonry-layout-vanilla","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiew82%2Fmasonry-layout-vanilla","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiew82%2Fmasonry-layout-vanilla/lists"}