1

I'm new to JS. I'd like to achieve exactly this effect showcasing photos: kristianhammerstad.com

I'm already using masonry, see the code: http://codepen.io/Kiks/pen/YWzNjr Images will have same width but different height. That's the only rule.

The problem is shown on video simulation: jmp.sh/mMcu1Bb – as soon as images have different height, the grid is broken and images are placed on each other. But when I have same height of linked images, the grid is OK.

Funny thing is that the issue you see in the video is only on my website (Chrome, Safari) But it's working nicely in Codepen (after first load, even if I resize browser window, always OK). Can you explain this? What special does Codepen include there?

This is exactly my code. Could you tell me what I'm missing and where? I'm just 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 and 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 at the end of the document so the 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>
Kiks
  • 23
  • 8

1 Answers1

1

I found it! Just one bracket was in addition. Now, I'm not loading whole window, just the div with images. I hope it's really okay but finally it looks like my 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 a tiny problem. Look how you can see just one column before the proper grid is created: http://jmp.sh/5wqeF4Q (I'm refreshing the page twice)

Any ideas how to get nice grid immediately?

Kiks
  • 23
  • 8