Extras
- --
-
- Extra examples -
- RequireJS -
- Browserify -
- Webpack -
- Bootstrap -
- Animating item size -
- Web fonts -
- Typekit -
- Issues -
- Reduced test cases -
- Submitting issues -
- Browser support -
- Upgrading from v3 -
- Additional resources -
Extra examples
- --
-
- Iteratively reveal items after each image is loaded. See explanation on issue #501 -
- Drag and drop in and out of Masonry (sort of) -
RequireJS
- -Masonry supports RequireJS.
- -You can require masonry.pkgd.js.
- -requirejs( [
- 'path/to/masonry.pkgd.js',
-], function( Masonry ) {
- new Masonry( '.grid', {...});
-});
-
-
-To use Masonry as a jQuery plugin with RequireJS and masonry.pkgd.js, you need to use jQuery Bridget.
- - -// require the require function
-requirejs( [ 'require', 'jquery', 'path/to/masonry.pkgd.js' ],
- function( require, $, Masonry ) {
- // require jquery-bridget, it's included in masonry.pkgd.js
- require( [ 'jquery-bridget/jquery-bridget' ],
- function( jQueryBridget ) {
- // make Masonry a jQuery plugin
- jQueryBridget( 'masonry', Masonry, $ );
- // now you can use $().masonry()
- $('.grid').masonry({...});
- }
- );
-});
-
-
-Or, you can manage dependencies with Bower. Set baseUrl to bower_components and set a path config for all your application code.
requirejs.config({
- baseUrl: 'bower_components/',
- paths: {
- app: '../'
- }
-});
-
-requirejs( [
- 'masonry/masonry',
- 'app/my-component.js'
-], function( Masonry, myComp ) {
- new Masonry( '.grid', {...});
-});
-
-
-You can require Bower dependencies and use Masonry as a jQuery plugin with jQuery Bridget.
- -requirejs.config({
- baseUrl: '../bower_components',
- paths: {
- jquery: 'jquery/jquery'
- }
-});
-
-requirejs( [
- 'jquery',
- 'masonry/masonry',
- 'jquery-bridget/jquery-bridget'
- ],
- function( $, Masonry, jQueryBridget ) {
- // make Masonry a jQuery plugin
- jQueryBridget( 'masonry', Masonry, $ );
- // now you can use $().masonry()
- $('.grid').masonry({...});
-});
-
-
-
-Browserify
- -Masonry works with Browserify. Install Masonry with npm.
- -npm install masonry-layout
-
-
-var Masonry = require('masonry-layout');
-
-var msnry = new Masonry( '.grid', {
- // options...
-});
-
-
-To use Masonry as a jQuery plugin with Browserify, you need to use jQuery Bridget
- -npm install jquery
-npm install jquery-bridget
-
-
-var $ = require('jquery');
-var jQueryBridget = require('jquery-bridget');
-var Masonry = require('masonry-layout');
-// make Masonry a jQuery plugin
-jQueryBridget( 'masonry', Masonry, $ );
-// now you can use $().masonry()
-$('.grid').masonry({
- columnWidth: 80
-});
-
-
-
-Webpack
- -Install Masonry with npm.
- -npm install masonry-layout
-
-
-You can then require('masonry-layout').
// main.js
-var Masonry = require('masonry-layout');
-
-var msnry = new Masonry( '.grid', {
- // options...
-});
-
-
-Run webpack.
- - -webpack main.js bundle.js
-
-
-jQuery plugin functionality needs to be installed separately, similar to using Browserify.
- -npm install jquery-bridget
-
-
-var $ = require('jquery');
-var jQueryBridget = require('jquery-bridget');
-var Masonry = require('masonry-layout');
-// make Masonry a jQuery plugin
-jQueryBridget( 'masonry', Masonry, $ );
-// now you can use $().masonry()
-$('.grid').masonry({
- columnWidth: 80
-});
-
-
-
-Bootstrap
- -You can use Masonry layouts with Bootstrap grid system. This example will display a fluid grid of 3 columns, using col-xs-4 as columnWidth.
<div class="container-fluid">
- <!-- add extra container element for Masonry -->
- <div class="grid">
- <!-- add sizing element for columnWidth -->
- <div class="grid-sizer col-xs-4"></div>
- <!-- items use Bootstrap .col- classes -->
- <div class="grid-item col-xs-8">
- <!-- wrap item content in its own element -->
- <div class="grid-item-content">...</div>
- </div>
- <div class="grid-item col-xs-4">
- <div class="grid-item-content">...</div>
- </div>
- ...
- </div>
-</div>
-
-
-$('.grid').masonry({
- itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col-
- columnWidth: '.grid-sizer',
- percentPosition: true
-});
-
- Use multiple .col- classes on item elements to use Bootstrap’s grid media queries to responsively change column sizes. This example will use 2, then 3, then 4 columns at different screen sizes.
<div class="container-fluid">
- <div class="grid">
- <!-- 2 col grid @ xs, 3 col grid @ sm, 4 col grid @ md -->
- <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
- <!-- 1 col @ xs, 2 col @ sm, 2 col @ md -->
- <div class="grid-item col-xs-6 col-sm-8 col-md-6">
- <div class="grid-item-content">...</div>
- </div>
- <!-- 1 col @ xs, 1 col @ sm, 1 col @ md -->
- <div class="grid-item col-xs-6 col-sm-4 col-md-3">
- <div class="grid-item-content">...</div>
- </div>
- ...
- </div>
-</div>
-
- Animating item size
- -You cannot transition or animate the size of an item element and properly lay out. But there is a trick — you can animate a child element of the item element.
- -<div class="grid">
- <!-- items have grid-item-content child elements -->
- <div class="grid-item">
- <div class="grid-item-content"></div>
- </div>
- ...
-
-
-/* item is invisible, but used for layout
-item-content is visible, and transitions size */
-.grid-item,
-.grid-item-content {
- width: 60px;
- height: 60px;
-}
-.grid-item-content {
- background: #09D;
- transition: width 0.4s, height 0.4s;
-}
-
-/* both item and item content change size */
-.grid-item.is-expanded,
-.grid-item.is-expanded .grid-item-content {
- width: 180px;
- height: 120px;
-}
-
- Click to item to toggle size
-- Edit this demo - or vanilla JS demo on CodePen -
-This technique works on items with responsive, percentage widths. Although, it does require a bit more JS. Check out the example on CodePen to see how it’s done.
- -.grid-item {
- width: 20%;
- height: 60px;
-}
-
-.grid-item-content {
- width: 100%;
- height: 100%;
- background: #09D;
- transition: width 0.4s, height 0.4s;
-}
-/* item has expanded size */
-.grid-item.is-expanded {
- width: 60%;
- height: 120px;
-}
-
- Click to item to toggle size
-- Edit this demo - or vanilla JS demo on CodePen -
-Web fonts
- -Like images, unloaded web fonts can throw off Masonry. To resolve this, trigger layout after fonts have been loaded. Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.
Typekit
- -Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit’s default script, try{Typekit.load();}catch(e){}.
var msnry;
-
-function triggerMasonry() {
- // don't proceed if masonry has not been initialized
- if ( !msnry ) {
- return;
- }
- msnry.layout();
-}
-// initialize masonry on document ready
-docReady( function() {
- var container = document.querySelector('.grid');
- msnry = new Masonry( container, {
- // options...
- });
-});
-// trigger masonry when fonts have loaded
-Typekit.load({
- active: triggerMasonry,
- inactive: triggerMasonry
-});
-
-
-// or with jQuery
-var $grid;
-
-function triggerMasonry() {
- // don't proceed if $grid has not been selected
- if ( !$grid ) {
- return;
- }
- // init Masonry
- $grid.masonry({
- // options...
- });
-}
-// trigger masonry on document ready
-$(function(){
- $grid = $('.grid');
- triggerMasonry();
-});
-// trigger masonry when fonts have loaded
-Typekit.load({
- active: triggerMasonry,
- inactive: triggerMasonry
-});
-
-
-
-Issues
- -Reduced test cases
- -Creating a reduced test case is the best way to debug problems and report issues. Read CSS Tricks on why they’re so great.
- -Create a reduced test case for Masonry by forking any one of the CodePen demos from these docs.
- --
-
- A reduced test case clearly demonstrates the bug or issue. -
- It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. -
- A link to your production site is not a reduced test case. -
Creating a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help us debug the problem. They help others understand the problem.
- - -Submitting issues
- -Report issues on GitHub. Make sure to include a reduced test case. Without a reduced test case, your issue may be closed.
- - -Browser support
- -Masonry v4 supports IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, and Chrome 12+.
- -For IE8+ and Android 2.3 support, try Masonry v3.
- - -Upgrading from v3
- -Masonry v4 dropped browser support for IE8, IE9, and Android 2.3. All options, methods, and code for Masonry v3 is backwards compatibile with Masonry v4.
- --
-
isOptionNameoptions renamed tooptionName. Masonry v4 is backwards compatible with the oldisOptionNameoptions. - -
- - HTML initialization can be done with
data-masonry. Masonry v4 is backwards compatible with previous code:js-masonryclass anddata-masonry-optionsattribute.
- - IE8 helper dependencies removed: eventie, get-style-property, doc-ready -
jquery-bridget/jquery.bridgetpath renamed tojquery-bridget/jquery-bridget
-
Additional resources
- --
-
- Masonry CodePens -
- The Metafizzy blog has posts that cover specialized use cases -
- My answers on Stack Overflow -
- Sites using Masonry on Delicious -
- Stack Overflow questions about Masonry -
- Related Masonry links -
- Other resources that are like Masonry but not -
-
-
-
-
-
-
-
-
-
--
-
-
- -
-
-
- -
- Follow @{{ site.fontawesome.twitter }}
-
- -
- Tweet
-
-
-