masonry.desandro.comMasonry

La.script src = "/path/to/masonry.pkgd.min.js"/ scriptworks on a container grid element with a group of child items.div class = "grid" div class = "grid-item"... / div div class = "grid-item grid-itemwidth2"... / div div class = "grid-item"... / div... / divCSS All sizing of items is handled by your CSS. .grid-item { width : 200px ; } .grid-itemwidth2 { width : 400px ; } Initialize with jQuery You can use as a jQuery plugin: $( ’selector’ ).masonry() . $( ’.grid’ ).masonry({ // options itemSelector: ’.grid-item’ , columnWidth : 200 }); Initialize with Vanilla JavaScript You can use with vanilla JS: new ( elem, options ) . The () constructor accepts two arguments: the container element and an options object. var elem = document .querySelector( ’.grid’ ); var msnry = new ( elem, { // options itemSelector: ’.grid-item’ , columnWidth : 200 }); // element argument can be a selector string // for an individual element var msnry = new ( ’.grid’ , { // options }); Initialize in HTML You can initialize in HTML, without writing any JavaScript. Add data-masonry attribute to the container element. Options can be set in its value.div class = "grid" data-masonry = ’{ "itemSelector": ".grid-item", "columnWidth": 200 }’Edit this demo on CodePen Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector" : . Note the value of data-masonry is set with single quotes ’ , but JSON entities use double-quotes " . HTML initialization was previously done with a class of js-masonry and setting options in data-masonry-options in v3. v4 is backwards compatible with this code.div class = "grid js-masonry" data-masonry-options = ’{ "itemSelector": ".grid-item", "columnWidth": 200 }’Next Learn more about how to use : Layout Options Methods MIT License is released under the MIT License . Have at it. Layout Options Methods Events Extras FAQ is made by David DeSandro . Make something rad with it. Dave also makes: Isotope Filter & sort magical layouts Infinite Scroll Automatically add next page Flickity Touch, responsive, flickable carousels Packery Gapless, draggable grid layouts Logo Pizza Hot & ready logos for sale Fizzy School Lessons in JavaScript for jQuery...