javascript - Masonry: Images overlapping above each other -
i'm new js. i'd achieve effect showcasing photos: kristianhammerstad.com
i'm using masonry, see code: http://codepen.io/kiks/pen/ywznjr images have same width different height. that's rule.
the problem shown on video simulation: jmp.sh/mmcu1bb – images have different height, grid broken , images placed on each other. when have same height of linked images, grid ok.
funny thing issue see in video on website (chrome, safari) it's working nicely in codepen (after first load, if resize browser window, ok). can explain this? special codepen include there?
this code. tell me i'm missing , where? i'm learning, please have patience. thank you
/* masonry magic */ .container { width: 96% !important; margin: 0 auto; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #masonry { margin: 0 auto; width: 100%; position: relative; /*z-index:2001;*/ } .item { width: 460px; height: auto; background: invisible; margin: 0 auto 20px auto; /*float: left;*/ } .card-text { width: 460px; padding-right: 40px; } /* end of masonry magic */ body { padding-top: 60px; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .lead { font-weight: 400; font-size: 24px; line-height: 1.6; color: #444444; margin-bottom: 40px; } .text { text-align: left; font-size: 18px; line-height: 1.7; color: #444444; } p { margin-bottom: 20px; } <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>image showcase bootstrap</title> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <!-- own styles --> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <!-- <div id="masonry"> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x500"></div> </div> --> <div id="masonry"> <div class="item"><img src="http://placehold.it/460x500"></div> <div class="item"><img src="http://placehold.it/460x800"></div> <div class="item"><img src="http://placehold.it/460x600"></div> <div class="item"><img src="http://placehold.it/460x460"></div> <div class="item"><img src="http://placehold.it/460x300"></div> <div class="item"><img src="http://placehold.it/460x400"></div> <div class="item"><img src="http://placehold.it/460x200"></div> <div class="item"><img src="http://placehold.it/460x500"></div> </div> </div><!-- /.container --> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jquery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script> <script> var container = document.queryselector('#masonry'); var msnry = new masonry( container, { columnwidth: 460, gutter: 20, isfitwidth: true, itemselector: '.item' }); </script> </body> </html>
i found it! 1 bracket in addition. now, i'm not loading whole window, div images. hope it's okay looks code works properly.
working code: http://codepen.io/kiks/pen/olnbrg
$('#masonry').imagesloaded(function() { $('#masonry').masonry({ itemselector : '.item', columnwidth : 460, isanimated: true, gutter: 20, isfitwidth: true, animationoptions: { duration: 700, easing: 'linear', queue: false } }); }); although, there's still tiny problem. how can see 1 column before proper grid created: http://jmp.sh/5wqef4q (i'm refreshing page twice)
any ideas how nice grid immediately?
Comments
Post a Comment