{"id":13992230,"url":"https://github.com/DrewDahlman/Mason","last_synced_at":"2025-07-22T15:31:30.564Z","repository":{"id":5889243,"uuid":"7107514","full_name":"DrewDahlman/Mason","owner":"DrewDahlman","description":"Mason.js for creating a perfect grid with jQuery.","archived":true,"fork":false,"pushed_at":"2017-04-18T12:47:48.000Z","size":484,"stargazers_count":1217,"open_issues_count":17,"forks_count":182,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-06-26T08:02:26.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://masonjs.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DrewDahlman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-11T07:20:18.000Z","updated_at":"2025-05-22T18:46:02.000Z","dependencies_parsed_at":"2022-08-31T00:00:56.984Z","dependency_job_id":null,"html_url":"https://github.com/DrewDahlman/Mason","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DrewDahlman/Mason","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrewDahlman%2FMason","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrewDahlman%2FMason/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrewDahlman%2FMason/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrewDahlman%2FMason/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DrewDahlman","download_url":"https://codeload.github.com/DrewDahlman/Mason/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrewDahlman%2FMason/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266520699,"owners_count":23942321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-08-09T14:01:53.402Z","updated_at":"2025-07-22T15:31:29.361Z","avatar_url":"https://github.com/DrewDahlman.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","7. 网格系统"],"sub_categories":[],"readme":"[![forthebadge](http://forthebadge.com/images/badges/powered-by-electricity.svg)](http://forthebadge.com)\n\n## MasonJS\n\nMason.js is a jQuery plugin that allows you to create a perfect grid of elements.\n\nThis is not Masonry, or Isotope or Gridalicious. Mason fills in those ugly gaps, and creates a perfectly filled space.\n\n## Bower Version\n\n`2.0.2`\n\n## USE\n\n**Basic CSS**\n\n```\n#container {\n\twidth: 100%;\n\tposition: relative;\n}\n.box {\n\tfloat: left;\n\tbackground-color: #00ffff;\n\tposition: relative;\n}\n```\n\n**Call Mason.js (BASIC)**\n\n```\n$(\"#container\").mason({\n\titemSelector: \".box\",\n\tratio: 1.5,\n\tsizes: [\n\t\t[1,1],\n\t\t[1,2],\n\t\t[2,2]\n\t]\n});\n```\n\n## OPTIONS\n\nMason.js has a number of options:\n\n```\n$(\"#container\").mason({\n\titemSelector: \".box\",\n\tratio: 1.5,\n\tsizes: [\n\t\t[1,1],\n\t\t[1,2],\n\t\t[2,2]\n\t],\n\tcolumns: [\n\t\t[0,480,1],\n\t\t[480,780,2],\n\t\t[780,1080,3],\n\t\t[1080,1320,4],\n\t\t[1320,1680,5]\n\t],\n\tpromoted: [\n\t\t['class_name', 2, 1],\n\t\t['class_name', 2, 3],\n\t\t['class_name', 3, 3],\n\t],\n\tfiller: {\n\t\titemSelector: '.fillerBox',\n\t\tfiller_class: 'custom_filler',\n\t\tkeepDataAndEvents: false\n\t},\n\tlayout: 'fluid',\n\tgutter: 10\n},function(){\n\tconsole.log(\"COMPLETE!\")\n});\n```\n\n- **itemSelector**\n\t- the element that makes up your grid\n- **ratio**\n\t- The ratio is a number that is used to create the blocks based on column count and width. This is based on the number of columns requested and the browser width.\n- **sizes**\n\t- Sizes are an array of sizes you wish to use in your grid. These are composed of block numbers. (ex: [1,1] means 1 block high, 1 block wide)\n- **columns**\n\t- columns are an array of break points for your columns. Think of this like media queries. start small and grow. They should be formatted as [min,max,cols]\n- **filler**\n\t- itemSelector: This describes the elements to be used to fill in blank spaces. This will default to the original itemSelector if there is nothing\n\t- filler_class: This is a class given to filler elements within the grid, used for cleaning up if a grid set to fluid\n\t- keepDataAndEvents: Mason creates a clone of the filler elements before adding them to the grid, this boolean (true/false) property tells Mason to retain the events and data that have already been bound to the filler elements\n- **promoted**\n\t- Accepts an array of ['CLASS_NAME', WIDTH, HEIGHT] these items will be forced to those dimensions.\n- **Layout**\n\t- There are two layouts, fluid and fixed. Mason will default to fixed. Fluid means it will be responsive.\n- **Callback**\n\t- You can add a callback function to Mason to notify you when the grid has completed building.\n- **Gutter**\n\t- Allows you to add spacing between the elements, think of this as a margin.\n\n## DESTROY\n\nAt times you may want to destroy the mason object and no longer track window changes, to do this assign the mason grid to a variable such as `var mason` and when you're ready to destroy just call `mason.destroy()` this will remove all listeners on the mason object and you can remove the grid or elements without any ill effects.\n\n## Install\n\n1. `npm install`\n2. `bower install`\n\n## Running\n\ncd into project and run `gulp`\n\n## Building\n\ncd into project\n\n1. run `gulp dist`\n2. run `gulp finish_dist`\n\n## Examples\n\nLook at the public folder for examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDrewDahlman%2FMason","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDrewDahlman%2FMason","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDrewDahlman%2FMason/lists"}