i have checked posts concerning topic, none of solutions worked me.
this grid looks like:
here jsfiddle , here code. html:
<!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- masonry --> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <link rel="stylesheet" href="css/style.css"> <!-- imagesloaded --> <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"> // init masonry var $grid = $('.grid').masonry({ itemselector: '.grid-item', percentposition: true, columnwidth: '.grid-sizer' }); // layout masonry after each image loads $grid.imagesloaded().progress( function() { $grid.masonry('layout'); }); </script> <!-- bootstrap --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <body> <div class="container"> <div class="grid"> <div class="grid-item"> <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/mellowmanace.jpg" alt="mellow man ace"> </div> <div class="grid-item"> <img src="https://pbs.twimg.com/media/c2o6p6zwgaa67ja.jpg" alt="..."> </div> <div class="grid-item"> <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/ch-0141.jpg?enlarge=false&matte=true&mattecolor=black&quality=0.85" alt="..."> </div> <div class="grid-item"> <img src="https://cdn-images-1.medium.com/max/600/1*vfcrfknhtvwaxftgfebcog.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> </div> </div> css:
* { box-sizing: border-box; } /* force scrollbar */ html { overflow-y: scroll; } /* body { font-family: sans-serif; } */ /* ---- grid ---- */ .grid { background: #ddd; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer, .grid-item { width: 33.333%; float: left; } .grid-item img { display: block; max-width: 100%; } what doing wring? please me. many in advance!
you need put javascript in it's own script tag (without src) , need put jquery you're using imagesloaded() in $(document).ready() (or $(function(){})) , no need specify columnwidth layout column width in css.
.grid { background: #ddd; } .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.333%; float: left; } .grid-item img { display: block; max-width: 100%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script> <script> $(function() { var $grid = $('.grid').masonry({ itemselector: '.grid-item', percentposition: true, }); $grid.imagesloaded().progress(function() { $grid.masonry('layout'); }); }); </script> <div class="grid"> <div class="grid-item"> <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/mellowmanace.jpg" alt="mellow man ace"> </div> <div class="grid-item"> <img src="https://pbs.twimg.com/media/c2o6p6zwgaa67ja.jpg" alt="..."> </div> <div class="grid-item"> <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/ch-0141.jpg?enlarge=false&matte=true&mattecolor=black&quality=0.85" alt="..."> </div> <div class="grid-item"> <img src="https://cdn-images-1.medium.com/max/600/1*vfcrfknhtvwaxftgfebcog.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> </div> <div class="grid-item"> <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> </div> </div>
Comments
Post a Comment