4.2.2 • Published 6 years ago

masonry-layout v4.2.2

Weekly downloads
134,751
License
MIT
Repository
github
Last release
6 years ago

Masonry

Cascading grid layout library

Masonry 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.

See masonry.desandro.com for complete docs and demos.

Install

Download

CDN

Link directly to Masonry files on unpkg.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Package managers

npm: npm install masonry-layout --save

Bower: bower install masonry-layout --save

Support Masonry development

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.

Initialize

With jQuery

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

With vanilla JavaScript

// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

// init with selector
var msnry = new Masonry( '.grid', {
  // options...
});

With HTML

Add a data-masonry attribute to your element. Options can be set in JSON in the value.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

License

Masonry is released under the MIT license. Have at it.


Made by David DeSandro

ETKlms-system-service-frontedavroraos@wpshopify/components@thegetty/getty-uibk-foundationhce-saasgiftpack-f2e-generator@everything-registry/sub-chunk-2136Giftpacktbirdstboc-site-componentstav-uiwiz-componentswaibu-extrarm3shinedsankhya-web-componentsvue-cli-plugin-infinitevue-cli-plugin-vistelbs-thememll-components-reactjaywing-frontend-component-libraryiclickisotope-layoutisotope-modolu-columnsisotope-modulo-columnsisotope-nextmektepplushashtegnyhexo-theme-flowbitehtmlpressgulp-simple-layoutkantig-coreglobular-mvcmusefind-core-frontendm-isotopemasonreactmasonry-grid-nuxtmasonry-plusmasonry-projectnodeledge-basenodebb-theme-lavendernodebb-theme-lavender-v6pa-pattern-librarypages-tsppcase-uipip-webui2-layoutspip-webui2-layouts-temppip-webui-layouts-ngxpicture-waterfall-streamoijoijnmbs-website-uingx-masonry-2ngx-masonry-galleryngx-masonry-ng5ngx-isotope-universalng5-masonryngm-masonryng-custom-masplp-css-pbtnhdesignnest-angularpatternslibreact-isometric-gridreact-isometric-grid-tsng-masonry-layoutng-lower-code-uinoobgalleryreact-masonry-componentreact-masonry-component-forkedreact-masonry-component-mizsteexsneat-bootstrap-html-admin-template-freeroughsinblogts-theme@ascua/masonry@bardoui/vtermeh@choiceform/ember-cform-uizerodzu-componentszrp-ngx-masonryvue-masonryvue-masonry-componentvue-masonry-puresolvue2-waterfalltruuue-jtc-styleguidetruuue-styleguide@hundh/contao-list-bundle@eirikk/svelte-masonry-layout@emilyhsia/themebau@goldinteractive/feature-masonry@lleohao/raneto@lanthings/masonry@nextai/productgpt@eqproject/eqp-dashboard@expressive-analytics/photrist-common@ezraobiwale/vue-masonry@mmintel/react-primer
4.2.2

6 years ago

4.2.1

7 years ago

4.2.0

8 years ago

4.1.1

8 years ago

4.1.0

9 years ago

4.0.0

9 years ago

3.3.2

9 years ago

3.3.1

9 years ago

3.3.0

10 years ago

3.2.3

10 years ago

3.2.2

10 years ago

3.2.1

10 years ago

3.2.0

10 years ago