砌体：图像相互重叠

Question

我是 JS 新手。我想达到展示照片的效果：kristianhammerstad.com

我已经在用masonry了，看代码：http://codepen.io/Kiks/pen/YWzNjr 图像将具有相同的宽度但不同的高度。这是唯一的规则。

问题在视频模拟中显示：jmp.sh/mMcu1Bb – 一旦图像具有不同的高度，网格就会被破坏并且图像相互重叠。但是当我有相同高度的链接图像时，网格就可以了。

有趣的是，你在视频中看到的问题只出现在我的网站上（Chrome，Safari）但它在 Codepen 中运行良好（首次加载后，即使我调整浏览器大小window，总是好的）。你能解释一下吗？ Codepen 有什么特别之处？

这正是我的代码。你能告诉我我错过了什么以及在哪里吗？刚刚学习，请耐心等待。谢谢

/* 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>

Answer 1

我找到了！只增加了一个支架。现在，我没有加载整个 window，只是 div 和图像。我希望它真的没问题，但最终看起来我的代码可以正常工作。

工作代码：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
                }
            });
        });

不过，还有一个小问题。看看如何在创建正确的网格之前只看到一列：http://jmp.sh/5wqeF4Q（我刷新页面两次）

有什么想法可以立即获得漂亮的网格吗？

砌体：图像相互重叠

Masonry: Images overlapping above each other

html

javascript

css

jquery

jquery-masonry