Skip to content

Instantly share code, notes, and snippets.

@alessandroraffa

alessandroraffa/bootstrap-masonry-plugin.js

Last active December 27, 2020 11:54
Show Gist options
  • Save alessandroraffa/f737d0dc29e727a52947b8e2d7c27792 to your computer and use it in GitHub Desktop.
Save alessandroraffa/f737d0dc29e727a52947b8e2d7c27792 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Bootstrap 3 Masonry
Raw
bootstrap-masonry-plugin.js
$(document).ready(function () {
var masonryOptions = {
columnWidth: '.masonry-sizer',
itemSelector: '.masonry-item',
percentPosition: true
};
var $masonryContainer = $('.masonry-container');
var masonryBreakpoint = 767; // change this as you wish
var masonryActive = false;
var activateMasonry = function () {
if (masonryActive === false) {
$masonryContainer.masonry(masonryOptions);
masonryActive = true;
console.log('bootstrap masonry activated: width ' + $(document).width());
}
};
var destroyMasonry = function () {
if (masonryActive === true) {
$masonryContainer.masonry('destroy');
masonryActive = false;
console.log('bootstrap masonry destroied: width ' + $(document).width());
}
};
if ($(document).width() > masonryBreakpoint) {
activateMasonry();
$masonryContainer.resize(function () {
console.log('bootstrap masonry container resized');
if ($(document).width() < masonryBreakpoint) {
destroyMasonry();
} else {
activateMasonry();
}
});
}
else {
console.log('bootstrap masonry not activated: width ' + $(document).width());
}
$(window).resize(function () {
if ($(document).width() > masonryBreakpoint) {
activateMasonry();
$masonryContainer.resize(function () {
console.log('bootstrap masonry container resized');
if ($(document).width() < masonryBreakpoint) {
destroyMasonry();
} else {
activateMasonry();
}
});
} else {
destroyMasonry();
}
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Bootstrap 3 Masonry</title>
<!-- Latest compiled and minified Bootstrap's CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row masonry-container">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 masonry-sizer"></div><!-- left empty for column sizing -->
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 masonry-item"></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap's JavaScript plugins -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- https://github.com/desandro/masonry plugin -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- Responsive Bootstrap 3 Masonry -->
<script src="bootstrap-masonry-plugin.js"></script>
</body>
</html>
@nomisoverkill
Copy link

Thanks!! It works super well! ✨

@akshay48299
Copy link

akshay48299 commented Oct 25, 2018 •
edited
Loading

Works excellent !!!!
Thank You.

@repiatx
Copy link

repiatx commented May 8, 2019

thx it worked!! and
masonarybreakpoint=567
beacuse it will glitch whitespace
thx anyways :)

@gilles66
Copy link

not working.
White page for me.
And no error in the console.
Just "bootstrap masonry activated: width 1600".

@RichardPiel
Copy link

not working.
White page for me.
And no error in the console.
Just "bootstrap masonry activated: width 1600".

Put some html in div may be

@TanmayChakrabarty
Copy link

Superb. Thanks a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment