Last active
December 27, 2020 11:54
-
-
Save alessandroraffa/f737d0dc29e727a52947b8e2d7c27792 to your computer and use it in GitHub Desktop.
Responsive Bootstrap 3 Masonry
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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(); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Works excellent !!!!
Thank You.
thx it worked!! and
masonarybreakpoint=567
beacuse it will glitch whitespace
thx anyways :)
not working.
White page for me.
And no error in the console.
Just "bootstrap masonry activated: width 1600".
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
Superb. Thanks a lot
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks!! It works super well! ✨